Webpack打包报无合适loader错误，JSON引入编译失败如何解决？

问题根因 #

报错指向JSX语法未被正确转译，webpack无法识别<Menu />这类JSX标签，和JSON文件无关，webpack5已经内置JSON文件处理能力，无需额外配置json-loader。

解决方案 #

按以下步骤依次排查修改：

• 第一步：修改webpack.config.js配置，同步匹配.js和.jsx后缀文件，同时添加后缀自动识别配置，修改后完整配置如下：

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist', 'assets'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json']
  },
  module: {
    rules: [
      { 
        test: /\.(js|jsx)$/, 
        exclude: /node_modules/, 
        loader: 'babel-loader' 
      }
    ]
  }
};

• 第二步：确认.babelrc文件存放位置为项目根目录，和webpack.config.js、package.json处于同级目录。
• 第三步：清理项目缓存后重新执行打包命令：

rm -rf node_modules/.cache
npm run build

如果项目中存在其他.jsx后缀的组件，修改后也会被babel-loader正确转译，上述操作完成后即可解决JSX语法识别报错问题。

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