我正在使用create-react-app。我试图从我的src/components内部的文件中调用我的公共文件夹中的图像。我收到这个错误信息。

./src/components/website_index.js模块未找到:你试图 import ../../public/images/logo/WC-BlackonWhite.jpg 在项目src/目录之外。国外的相对进口 Src /不支持。您可以将它移动到src/,或者添加一个 从项目的node_modules/到它的符号链接。

从“../../public/images/logo_2016.png”导入logo; <img className="Header-logo" src={logo} alt=" logo" />

我读过很多东西,说你可以做一个导入的路径,但这仍然不是为我工作。任何帮助都将不胜感激。我知道有很多这样的问题,但他们都告诉我导入标志或形象,所以很明显,我在大局中遗漏了一些东西。


当前回答

react-app-rewired包可以用来删除插件。这样你就不用弹射了。

按照npm包页面上的步骤(安装包并翻转包中的调用)。Json文件),并使用类似于这个的config-override .js文件:

const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');

module.exports = function override(config, env) {
    config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin));

    return config;
};

这将从使用的WebPack插件中删除ModuleScopePlugin,但保留其余部分,并消除了弹出的必要性。

其他回答

安装这两个包

npm i --save-dev react-app-rewired customize-cra

package.json

"scripts": {
    - "start": "react-scripts start"
    + "start": "react-app-rewired start"
},

config-overrides.js

const { removeModuleScopePlugin } = require('customize-cra');

module.exports = function override(config, env) {
    if (!config.plugins) {
        config.plugins = [];
    }
    removeModuleScopePlugin()(config);

    return config;
};

这是一个相对导入的问题,这可能是因为我们使用了“create-react-app project”命令,该命令形成了一个名为project的目录,其中包含node_modules文件夹和其中的public和src文件夹中的其他几个文件。 create-react-app命令设置了一个限制,我们不能从src外部导入任何东西。

我的问题:

我必须导入在src文件夹外的node_modules文件夹中创建的react-bootstrap css文件。 我使用导入“../node_modules/bootstrap/dist/css/bootstrap.min.css”;但是我在终端上得到了错误。 我发现我可以创建一个新的react应用程序,并遵循从a到G的解决步骤,以解决这个问题。

解决方案: A)创建一个新的react应用,使用Create -react-app new

B) cd new

C)运行以下命令:"npm install react-bootstrap bootstrap@4.6.0"(不带""双引号)

D)在你的react文件中导入bootstrap: D.1)导入“../node_modules/bootstrap/dist/css/bootstrap.min.css”; 或 D.2)从“react-bootstrap/Button”导入按钮;

E)在你的react文件中创建一个类似Button或任何东西的引导元素,用于D.1) < Button className="btn btn-success" >引导< / Button > 或 2) <按钮变量="primary"> Bootstrap < /按钮>

F)在终端:cd src

G)在终端:npm启动,

这一次它将被成功编译。

推理: 当我按顺序执行步骤A到G时,我可以看到react-bootstrap终于开始工作了,这一次我没有得到任何错误。 (我想到这个解决方案是因为:

我已经使用npm安装“@material-ui/icons”,它被安装在src之外的node_modules文件夹中。 在我的react文件中,我使用了import Add from“@material-ui/icons/Add” 材质界面图标对我来说工作得很好, 但这里我们也从src外部导入,从node_modules..一切都很正常。为什么这次从src外部导入没有错误) 这就是为什么我刚刚创建了一个新的react应用程序,并遵循解决方案步骤a到G。

把@Flaom写的评论放在这里,标记为回复答案,这实际上挽救了生命:

“这怎么是公认的答案呢?通过简单地设置NODE_PATH=./src/..在。env文件中。通过这样做,你可以从src文件夹外导入,而不用经历弹出应用程序的痛苦。”

Flaom

编辑添加了一些更多的信息@cigien请求。

上面所有的答案都很好地描述了为什么当我们用create-react-app创建react应用程序时,我们不能使用公共文件夹中的图像。我自己也有这个问题,读了所有这些答案,我意识到,答案说的是“黑”应用程序,以删除限制我们的模块。有些答案甚至没有撤销选项。对于“培训”应用程序来说,这是可以的。

就我个人而言,我不希望在我自己的项目中添加改变应用概念的解决方案,特别是在商业项目中。@Flaom解决方案是最简单的,如果将来有任何变化,它可以被另一个解决方案取代。它没有任何风险,可以随时移除,是最简单的。

最好的解决方案是fork react-scripts,这实际上在官方文档中提到过,参见:ejection的替代方案

如果你想从公共目录访问CSS文件,你可能会遇到OUTSIDE OF SOURCE DIRECTORY错误

或者,您可以在index.html中链接此文件,该文件也位于公共目录中。

<link rel="stylesheet" href="App.css">