react导入文件报错解决

页面报错

Module not found: Error: You attempted to import ../utils/http.js which fall

控制台报错

bundle.js:67 Uncaught Error: Cannot find module '../utils/http'

不支持src/之外的相对导入

解决方法

将相关文件移入src之内。

限制原因或者解除限制

如果项目中不存在 webpack.config.js 那么这个限制文件就存在于node_module
node_modules\react-scripts\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 to,
        // 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,
        ]),
      ],

ModuleScopePlugin 这个插件功能是为了防止用户引入src目录之外的文件导致不可预期的结果。
因此 如果不需要此类限制，可以将整个 ModuleScopePlugin 注释掉

然后重新运行项目就不会报错了。