我正在使用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" />
我读过很多东西，说你可以做一个导入的路径，但这仍然不是为我工作。任何帮助都将不胜感激。我知道有很多这样的问题，但他们都告诉我导入标志或形象，所以很明显，我在大局中遗漏了一些东西。
当前回答
这对我来说很有效，不需要安装/更改任何东西
上下文:当我试图使用yarn运行构建生成一个构建时，我得到了这个错误
我所做的事情之间的工作和失败的纱线运行建立
我将ant设计更新到最新的稳定版本(v4.23.5)。
注:我非常相信这与这个版本无关。我提一下只是为了补充一些细节。
这个回答解决了我的问题。但是我没有更改任何访问src目录之外内容的导入。 更改包括更新的包。json,纱线。lock，新的Antd实现(主要是道具的变化)。 为什么构建命令坏了/为什么答案是工作的没有意义。
解决办法
因为所有的变化都与包装有关。json, yarn.lock。我删除了node_modules并清洁安装了所有的包。
Run
yarn
or
npm install
其他回答
有一些答案提供了react-app-rewired的解决方案，但customize-cra包括一个removeModuleScopePlugin() API，它更优雅一些。(这是相同的解决方案，但被customize-cra包抽象了。)
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 = removeModuleScopePlugin()
我能够导入文件src/外部的“复制”文件与file:作为本地依赖。
"dependencies": {
"@my-project/outside-dist": "file:./../../../../dist".
}
then
import {FooComponent} from "@my-project/outside-dist/components";
不需要弹出或react-app-rewired或其他第三方解决方案。
如果你的文件位于公共文件夹，如果你想导入它而不弹出或不使用react-app-rewired，那么在这种情况下，你可以通过域名和文件的路径访问文件，并使用axios。 示例:在公共文件夹中有一个名为favico.ico的字体文件。你想把它导入到src中的一个文件中。你 可以使用以下逻辑访问字体。
axios.get('example.com/favico.ico').then(() => {
// here you can access this file.
})
在上面的例子中，example.com是域名。如果您有不同的环境，如本地主机，登台，生产，那么在这种情况下，域名是不同的。 因此，要获得favico.ico，您可以使用以下逻辑。
axios.get(`${window.location.origin}/favico.ico`).then(() => {
// here you can access this file.
})
在上面的例子中，window.location.origin会给你当前的域，如果你在本地运行你的代码，它会给你http://localhost:{portnumber}， 如果您的代码运行在生产域中，并且生产域是example.com，那么它将为您提供“example.com”。因此，使用这种模式，您可以访问位于公共文件夹中的资产。
在我的项目中遇到了同样的问题，并在官方的create-react-app文档中找到了这个:https://create-react-app.dev/docs/using-the-public-folder/
有一个“逃生舱口”可以在模块系统之外添加资产:
如果您将文件放入公用文件夹，则它将不会被处理 webpack。相反，它将原封不动地复制到构建文件夹中。来 在公用文件夹中引用资产时，需要使用环境 变量PUBLIC_URL。
下面是他们提供的一个例子:
呈现(){ //注意:这是一个逃生口，应该谨慎使用! //通常我们建议使用' import '来获取资产url //如上面“添加图像和字体”所述。 返回<img src={process.env。PUBLIC_URL + '/img/logo.png'} />; ｝
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，但保留其余部分，并消除了弹出的必要性。
