React导入Nav组件报Module not found错误 如何正确导入模块

具体问题点 #

• 导入路径逻辑错误
  你的App.js文件本身就位于src目录下，当前编写的导入语句import Nav from './src/components/Nav/Nav'，会被Webpack按照相对于当前文件的路径规则解析，最终实际查找的路径为项目根目录/src/src/components/Nav/Nav，和你真实的目录结构完全不匹配，这也是报错提示“Can't resolve”的直接原因。
  正确的导入写法应该为：

  import Nav from './components/Nav/Nav';
  

• Webpack配置的层级完全错乱
  你把用于配置“自动识别文件后缀”的resolve规则，错误嵌入到了module字段下不存在的exports属性里，Webpack根本不会读取这个位置的配置，等于你写的.js/.jsx后缀自动补全规则完全没有生效。
  同时你的Webpack配置还有两处细节错误：
  1. 入口文件路径大小写不匹配：配置里写的entry: "./src/app.js"是小写开头的app.js，但你项目里的实际入口文件是大写开头的App.js，大小写敏感的环境下会直接找不到入口
  2. Babel加载器的匹配正则不规范：原来写的test: /\.js$|jsx/没有对jsx后缀做边界锚定，会错误匹配很多无关路径
     修正后的Webpack配置结构参考：

  const path = require("path");
  
  module.exports = {
      entry: "./src/App.js",
      output: {
          path: path.join(__dirname, 'public'),
          filename: 'bundle.js'
      },
      module: {
          rules: [{
              loader: 'babel-loader',
              test: /\.js$|\.jsx$/,
              exclude: /node_modules/
          }]
      },
      // resolve为顶级配置，和entry、output、module平级
      resolve: {
          extensions: ['.js', '.jsx']
      },
      devtool: 'cheap-module-eval-source-map',
      devServer: {
          contentBase: path.join(__dirname, 'public')
      }
  }
  

• 构建体系混用冲突
  当前项目是通过create-react-app初始化的（依赖中自带react-scripts），原本是靠react-scripts封装的内置Webpack规则运行项目，现在同时存在自定义Webpack配置和react-scripts两套体系，脚本规则也做了不兼容的替换：比如把原本属于react-scripts的build/test/eject脚本替换成了原生Webpack命令，很容易出现规则不匹配的问题。
  二选一的兼容方案：
  • 如果保留create-react-app的零配置体验：删除自定义的webpack.config.js，保持package.json中react-scripts的原有脚本配置即可，不需要手动写resolve规则
  • 如果要使用自定义Webpack流程：卸载react-scripts相关依赖，按照原生Webpack的规范梳理脚本与配置，避免两套体系共存

内容的提问来源于stack exchange，提问作者ashes999