我正在使用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" />
我读过很多东西,说你可以做一个导入的路径,但这仍然不是为我工作。任何帮助都将不胜感激。我知道有很多这样的问题,但他们都告诉我导入标志或形象,所以很明显,我在大局中遗漏了一些东西。
这是一个相对导入的问题,这可能是因为我们使用了“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。
再加上Bartek Maciejiczek的回答,下面是Craco的情况:
const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
const path = require("path");
module.exports = {
webpack: {
configure: webpackConfig => {
webpackConfig.resolve.plugins.forEach(plugin => {
if (plugin instanceof ModuleScopePlugin) {
plugin.allowedFiles.add(path.resolve("./config.json"));
}
});
return webpackConfig;
}
}
};
我之前的解决方案适用于Webpack 4,但不适用于Webpack 5。在浏览了从那时起积累的解决方法之后,我发现下面的方法非常简单(而且似乎是可扩展的)。
import { CracoAliasPlugin } from 'react-app-alias';
const cracoConfig = {
plugins: [
{
plugin: CracoAliasPlugin,
options: {
alias: { '~': './' },
},
},
],
}
然后像这样导入:
import whatever from '~/<path-to-file>';