我正在使用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，但保留其余部分，并消除了弹出的必要性。
其他回答
最好的解决方案是fork react-scripts，这实际上在官方文档中提到过，参见:ejection的替代方案
您可以尝试使用simlinks，但是相反。
React不会遵循simlink，但是你可以将一些东西移动到源目录，并创建一个simlink到它。
在项目的根目录中，我有一个节点服务器目录，其中有几个模式文件。我想在前端使用它们，所以我:
移动文件/src 在终端，我cd到哪里模式文件属于服务器 ln -s SRC_PATH_OF_SCHEMA_FILE
这为react提供了它所需要的东西，node也很乐意通过simlinks包含文件。
安装这两个包
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;
};
下面是一个在简单情况下工作得很好的替代方案(使用fs和ncp)。在开发过程中，保持一个脚本运行，以监视/src之外的共享文件夹的更改。当进行更改时，脚本可以自动将共享文件夹复制到项目中。下面是递归地查看单个目录的示例:
// This should be run from the root of your project
const fs = require('fs')
const ncp = require('ncp').ncp;
ncp.limit = 16
// Watch for file changes to your shared directory outside of /src
fs.watch('../shared', { recursive: true }, (eventType, filename) => {
console.log(`${eventType}: ${filename}`)
// Copy the shared folder straight to your project /src
// You could be smarter here and only copy the changed file
ncp('../shared', './src/shared', function(err) {
if (err) {
return console.error(err);
}
console.log('finished syncing!');
});
})
此限制确保所有文件或模块(导出)都在src/目录中，实现在./node_modules/react-dev-utils/ModuleScopePlugin.js中，在以下代码行中。
// Resolve the issuer from our appSrc and make sure it's one of our files
// Maybe an indexOf === 0 would be better?
const relative = path.relative(appSrc, request.context.issuer);
// If it's not in src/ or a subdirectory, not our request!
if (relative.startsWith('../') || relative.startsWith('..\\')) {
return callback();
}
您可以通过
修改这段代码(不推荐) 或者执行eject，然后从目录中删除ModuleScopePlugin.js。 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');从。/ node_modules / react-scripts / config / webpack.config.dev.js
PS:注意弹出的后果。
