javascript - 找不到模块 : Can't resolve 'styled-component'-6ren

javascript - 找不到模块 : Can't resolve 'styled-component'

转载作者：行者123 更新时间：2023-11-29 18:44:25

24

4

<分区>

我使用 create-react-app 创建了一个新的 React 应用程序，然后使用 npm 安装了 styled-component。但是当我在组件中使用它时，出现以下错误。

Failed to compile. ./src/Components/Lightbox/styledLightbox.js

Module not found:

Can't resolve 'styled-component' in '/Users/ishan/Documents/react-app/src/Components/Lightbox'

以下是组件:

import React, { Component } from 'react';
import { LightboxWrapper } from './styledLightbox';

class Lightbox extends Component {

    renderEntry() {
        if (this.props.lightbox.type === "photo") {
         return  <img alt="name" src={this.props.lightbox.entry} />;
        } 
        if (this.props.lightbox.type === "video") {
        return <video src={this.props.lightbox.entry} onLoadedMetadata={(e) => {console.log("Video duration is: "+e.currentTarget.duration) } } autoPlay muted onEnded={() => console.log("Video ended")} width='100%' height='100%' ></video> 
        }
        if(this.props.lightbox.type === "text"){
        return <div> <p className="lightbox text"> {this.props.lightbox.entry} </p> </div>   
        }

    }

    render() {
        let classList = this.props.lightbox.status === true ? "lightbox-wrapper active" : "lightbox-wrapper";
        return ( 
                <LightboxWrapper className={classList}>
                    {/* {this.renderEntry()} */}
                </LightboxWrapper>
         );
    }
}

export default Lightbox;

以下是为在其他组件中使用而创建的样式组件:

import styled from "styled-component";

export const LightboxWrapper = styled.div`
      display: none;
        position: fixed;
        z-index: 100;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background: radial-gradient(
                center, 
                ellipse farthest-corner, 
                rgba(255,255,255,0) 0%,
                rgba(255,255,255,0) 100%
        );
    .active {
        display: block;
        background: radial-gradient(
            center, 
            ellipse farthest-corner, 
            rgba(255,255,255,0.5) 0%,
            rgba(255,255,255,0.1) 100%
    );
    }
    .active img, .active video {
        max-width: 70%;
        height: auto !important;
        margin: 0 auto;
        opacity: 1;
        /* box-shadow: 0px 2px 7px rgba(0,0,0,0.2); */
        transition: opacity 0.5s linear;
        animation: fadeInScale 1.2s ease-in-out;
        max-height: 70%;
        width: auto !important;
        position: relative;
        top: 11%;
}
`;

24

4

0

文章推荐： java - 在 setContentId() 之后将占位符返回到其 'empty' 状态

文章推荐： php - sql - 子查询计算分数

文章推荐： java - 这是一种策略模式还是回调？

文章推荐： javascript - 嵌套函数的用途或优点是什么？

python - 弃用警告 : please use dns. resolver.Resolver.resolve()
我使用 resolver() 作为 socket() 的替代方法，因为我发现当多个连接建立到不同的 IP 时，它最终会停止工作。无论如何它会向我返回一个警告，我应该使用 dns.resolver.R
javascript - Promise.resolve 与 resolve
我有这个代码: var promise1 = new Promise(function(resolve, reject) { setTimeout(() => { console
php - "resolved"/"resolving"术语在 PHP 中的实际含义是什么？
我仍在学习 PHP，我认为我不是母语人士，这并不难理解。此时，看了一大堆文档，跳入了深水区，于是打开Laravel源文件，一个接一个地看，试图更好地理解MVC的整个实现，包括路由、中间件如何组合成一
c# - 这段代码中的 IEventRepository 是什么？ Resolver.resolve( ) 是做什么的？
public JsonResult GetEvents(double start, double end) { var userName = Session["UserName"] as st
javascript - Promise.resolve 与 new Promise(resolve)
我正在使用 bluebird，我看到了两种将同步函数解析为 Promise 的方法，但我不明白这两种方法之间的区别。看起来堆栈跟踪有点不同，所以它们不仅仅是一个别名，对吧？那么首选的方式是什么？方
javascript - Promise.resolve() 和 just resolve() 的区别？
我写了下面的代码: function readFile(path) { return new Promise(function(resolve, reject){ if(!fs
javascript - Promise.resolve 与 new Promise(resolve)
我正在使用 bluebird，我看到了两种将同步函数解析为 Promise 的方法，但我不明白这两种方法之间的区别。看起来堆栈跟踪有点不同，所以它们不仅仅是一个别名，对吧？那么首选的方式是什么？方
javascript - promise 。 return resolve() 和 resolve() 有什么区别？
在某处读过这个例子: return new Promise( (resolve, reject) => { fs.readFile(file, (err, data) => { if (e
javascript - 找不到模块 : Error: Can't resolve 'crypto' and Cant resolve 'fs'
我刚开始学习 React，我一直在尝试让我的 React 应用程序连接到我的数据库 var mysql = require('mysql'); var con = mysql.createConnec
javascript - $q.resolve() 与 deferred.resolve() 之间的区别 - AngularJS
我需要从 $http 调用中返回一个 promise 中的自定义响应，以便我可以链接更多调用。我有两个可用的实现。有人可以解释两者之间的区别，并争论其中一个更好吗？在 fooService.js 实
javascript - AngularJS $q.resolve()、ES6 Promise.resolve()(和其他动物)
免责声明:这里实际上提出了两个问题，但我觉得它们密切相关。我正在尝试将 promise 对象传递给指令，并且我想在 promise 解析后立即在指令中运行一些初始化代码。在我的 Controlle
c++ - boost::asio::ip::tcp::resolver::resolve() 永远阻塞
我正在尝试创建类似于 this code 的东西在 boost.asio 示例中找到。套接字.h: class some_class { private: ... boost
javascript - Promise((resolve,reject)=>{}) 和 Promise(resolve =>{}) 有什么区别？
正如我们所知，Promise 构造函数采用一个执行函数，该函数具有两个参数，我们使用它们来生成成功案例或失败案例。今天我在编程，我被卡住了，但后来我解决了这个问题，但我发现了一件事需要理解。有什么区
javascript - Promise.resolve 和 new Promise(resolve) 是否可以互换
我认为 Promise.resolve 和 new Promise(resolve) 可以互换。考虑一下: A. new RSVP.Promise(function (resolve, reject
java - "The import java.awt cannot be resolved"和 "***** cannot be resolved to a type"
我下载了一个 Java 项目，我想研究并从中学习一些东西。当我在另一台计算机上下载它时效果很好，但是当我在我的计算机上尝试时，几乎每个声明和导入都会给出错误消息“* cannot be resolve
c++ - 使用模板 : Operator resolved first or conversion resolved first?
我昨天看到了一些有趣的编译器行为，我想我明白为什么会这样，但我想确定一下。所以，我不会写我的推理，只写事实。请注意，我使用 vector 而不是 string 并不是错字。我是故意这样做的，这样编译
javascript - 找不到从`AppName/resolver Ember 测试中导入的模块 `ember-resolver`
我正在尝试运行 Ember 测试，它给出了这个错误，提示无法找到从 `AppName/resolver 导入的模块 ember-resolver。我不确定是什么原因造成的。我正在使用 Ember-c
javascript - 为什么用 p.then(resolve) 比用 resolve(p) 更早地解决新的 promise ？
Code#1 和 Code#2 的区别在于:Code#1 使用 resolve(p) 而 Code#2 使用 p.then(()=>resolve()) 。我希望输出序列是不变的，但它们会生成不同的序
intellij-idea - IntelliJ IDEA "cannot resolve symbol"和 "cannot resolve method"
IntelliJ IDEA 无法解析内置 JVM 类型和方法的常见原因有哪些？例如，当我将鼠标悬停在 String 上时，工具提示显示“无法解析符号“String””。就好像 IntelliJ 不知道
intellij-idea - IntelliJ IDEA "cannot resolve symbol"和 "cannot resolve method"
IntelliJ IDEA 无法解析内置 JVM 类型和方法的常见原因有哪些？例如，当我将鼠标悬停在 String 上时，工具提示显示“无法解析符号“String””。就好像 IntelliJ 不知道

首页

博学

6Ren·AI

商城

javascript - 找不到模块 : Can't resolve 'styled-component'