react项目中引入的组件在src外从而报错

起项目遇到一个报错,内容为:Module not found: Error: You attempted to import /Users/Desktop/work/react-app/node_modules/console-browserify/index.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.直接翻译过来意思,你试图导入一个文件,它不属于项目src/目录。不支持src/之外的相对导入。你可以将它移动到src/中,或者从项目的node_modules/中添加一个符号链接到它。这个问题也可称为React 引入文件到Src外报错问题,解决办法为在路径项目目录项/config/webpack.config.js/找到

plugins: [
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like // please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [
    paths.appPackageJson,
    reactRefreshRuntimeEntry,
    reactRefreshWebpackPluginRuntimeEntry,
    babelRuntimeEntry,
    babelRuntimeEntryHelpers,
    babelRuntimeRegenerator,
]),
],

将new ModuleScopoPlugin内容全部注释,重启项目即可。ModuleScopePlugin这个插件功能是为了防止用户引入src目录之外的文件导致不可预期的结果。因为babel都是通过src目录内文件进行入口转义的,如果你引入了src目录外,例如src1,这样这个文件就不能经过babel转义。除非你保证你引入文件已经经过转义,所以你可以不使用该插件进行限制。

你可能感兴趣的:(javascript,前端,react.js,react)