react报 Relative imports outside of src/ are not supported

崽崽的谷雨

于 2022-10-19 10:38:51 发布

阅读量3.4k

点赞数 1

分类专栏： React

本文链接：https://blog.csdn.net/weixin_44058725/article/details/127403034

版权

webpack ModuleScopePlugin 导入错误资源管理配置修复

关键词由CSDN通过智能技术生成

React 专栏收录该内容

83 篇文章

订阅专栏

报错信息：

You attempted to import xxx 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/.

大概意思：

您尝试导入/Users/wen/gisspring project/smart city management/node_modules/console browserify/index。js位于项目src/目录之外。不支持src/之外的相对导入。您可以将其移动到src/中，也可以从项目的node_modules/向其添加符号链接。

原因：

就是引入了src 外的资源（js,css,img等等）

解决方案：

1. 可以把引入的资源放到 src里

2. 因为这个是webpack里配置了 ModuleScopePlugin 。

webpack.config.js中配置了 new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),导致限制开发者从非src目录导入模块文件
在webpack.config.js中查找 ModuleScopePlugin 并注释即可。

    new ModuleScopePlugin(paths.appSrc, [
          paths.appPackageJson,
          reactRefreshRuntimeEntry,
          reactRefreshWebpackPluginRuntimeEntry,
          babelRuntimeEntry,
          babelRuntimeEntryHelpers,
          babelRuntimeRegenerator,
        ]),