启用type:module时Webpack无法自动解析/index.(js|jsx)文件

错误原因 #

当项目通过package.json的"type": "module"配置启用ESM规范后，Node.js和Webpack会严格遵循ESM的导入规则：导入路径必须完全指定，即要么带文件扩展名，要么明确指向具体文件。这和CommonJS允许省略扩展名、自动寻找目录下index文件的行为不同，这就是触发The extension in the request is mandatory错误的核心原因。

解决方案 #

你已经在Webpack配置中添加了fullySpecified: false和extensions，但还需要调整两处配置来让自动解析生效：

1. 明确配置默认入口文件名 #

在resolve配置中添加mainFiles，指定Webpack解析目录时默认查找的文件名（通常为index）：

resolve: {
  extensions: [".js", ".jsx"],
  fullySpecified: false,
  mainFiles: ['index'] // 让Webpack自动寻找目录下的index.js/index.jsx
},

2. 移除多余的type: "javascript/auto"配置 #

你在module.rules中设置的type: "javascript/auto"会强制Webpack将文件当作CommonJS处理，这和项目的ESM模式冲突，移除后Webpack才能正确应用ESM的解析规则：

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: [
        {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      ],
    },
  ],
},

修改后的完整Webpack配置 #

import path from "path";
/**
 * @type {import('webpack').Configuration}
 */
export default {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(process.cwd(), "./dist"),
  },
  resolve: {
    extensions: [".js", ".jsx"],
    fullySpecified: false,
    mainFiles: ['index'],
  },
  mode: "development",
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env", "@babel/preset-react"],
            },
          },
        ],
      },
    ],
  },
};

额外注意事项 #

• 如果components目录下有独立的package.json（作为子模块），需确保该子包的main字段指向正确的入口文件（如"./index.js"）。
• @babel/preset-env会根据目标环境处理模块语法，确保Babel配置能正确将ESM转换为兼容目标环境的代码格式。

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