NestJS配置Webpack HMR报错：Cannot use import statement outside a module

核心原因 #

报错本质是Node.js将你的webpack-hmr.config.js识别为CommonJS模块，但文件里使用了ES模块的import语法，导致解析失败。

解决方案 #

1. 转换webpack配置文件为CommonJS格式 #

把webpack-hmr.config.js里的ES模块语法替换成CommonJS规范：

• 将import ... from 'webpack'改为const ... = require('webpack')
• 将export default改为module.exports

示例修改后的配置：

const { HotModuleReplacementPlugin } = require('webpack');

module.exports = function (options) {
  return {
    ...options,
    plugins: [
      ...options.plugins,
      new HotModuleReplacementPlugin(),
    ],
    devtool: 'eval-source-map',
  };
};

2. 验证nest-cli.json配置 #

确保nest-cli.json中没有冲突的编译器配置，示例如下：

{
  "compilerOptions": {
    "webpack": true,
    "webpackConfigPath": "webpack-hmr.config.js"
  }
}

（如果已经通过命令行指定--webpackPath，这里可以不用重复配置，但保持一致更稳妥）

3. 检查项目package.json的type字段 #

如果你的package.json里设置了"type": "module"，会导致Node默认以ES模块解析所有.js文件，但Nest CLI的webpack集成可能暂不兼容这种模式。建议暂时移除该字段，或者将webpack配置文件后缀改为.mjs（同时命令行里的webpackPath也要对应改成webpack-hmr.config.mjs）。

4. 确认依赖版本兼容性 #

运行以下命令更新核心依赖，避免版本不匹配问题：

npm install @nestjs/cli@latest webpack@latest webpack-cli@latest --save-dev

5. 重新执行构建命令 #

修改完成后，重新运行：

nest build --webpack --webpackPath webpack-hmr.config.js --watch

如果仍报错，检查终端输出的错误栈，定位具体是哪个文件触发的import语法问题，再针对性调整。

内容的提问来源于stack exchange，提问作者Đức Long