当前位置:   article > 正文

react项目中引入的组件在src外从而报错_which falls outside of the project src/ directory.

which falls outside of the project src/ directory. relative imports outside

起项目遇到一个报错,内容为: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/找到

  1. plugins: [
  2. // Prevents users from importing files from outside of src/ (or node_modules/).
  3. // This often causes confusion because we only process files within src/ with babel.
  4. // 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.
  5. // Make sure your source files are compiled, as they will not be processed in any way.
  6. new ModuleScopePlugin(paths.appSrc, [
  7. paths.appPackageJson,
  8. reactRefreshRuntimeEntry,
  9. reactRefreshWebpackPluginRuntimeEntry,
  10. babelRuntimeEntry,
  11. babelRuntimeEntryHelpers,
  12. babelRuntimeRegenerator,
  13. ]),
  14. ],

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/65914
推荐阅读
相关标签
  

闽ICP备14008679号