Nuxt/Webpack构建报错：Module parse failed: Unexpected character '#'

错误原因 #

该错误源于node-fetch-native包使用了ES私有类字段（如#path这类语法），而你的Webpack配置将node_modules目录完全排除在Babel编译范围外，导致Webpack无法识别该语法，缺少对应的loader处理。

解决方案 #

1. 调整Webpack/Babel配置，让babel-loader处理目标依赖 #

修改Webpack规则，不要完全排除node_modules，仅排除除node-fetch-native之外的目录，让Babel编译这个依赖包：

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      // 正则规则：排除node_modules下除node-fetch-native以外的目录
      exclude: /node_modules(?!\/node-fetch-native)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: [
            '@babel/plugin-proposal-private-property-in-object',
            '@babel/plugin-proposal-private-methods'
          ]
        }
      }
    }
  ]
}

2. 安装必要的Babel插件 #

如果@babel/preset-env未自动处理私有字段语法，需手动安装对应插件：

npm install --save-dev @babel/plugin-proposal-private-property-in-object @babel/plugin-proposal-private-methods

3. Nuxt项目专用配置方式 #

若使用Nuxt框架，直接修改webpack.config.js可能不生效，需在nuxt.config.js中通过build.extend扩展配置：

export default {
  build: {
    extend(config, { isDev, isClient }) {
      // 查找已有JS规则或添加新规则
      const jsRule = config.module.rules.find(rule => rule.test.test('.js'))
      if (jsRule) {
        // 修改排除规则，允许处理node-fetch-native
        jsRule.exclude = /node_modules(?!\/node-fetch-native)/
        // 追加必要Babel插件
        jsRule.use.options.plugins = [
          ...(jsRule.use.options.plugins || []),
          '@babel/plugin-proposal-private-property-in-object',
          '@babel/plugin-proposal-private-methods'
        ]
      } else {
        // 无JS规则时添加新规则
        config.module.rules.push({
          test: /\.(js|jsx)$/,
          exclude: /node_modules(?!\/node-fetch-native)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
              plugins: [
                '@babel/plugin-proposal-private-property-in-object',
                '@babel/plugin-proposal-private-methods'
              ]
            }
          }
        })
      }
    }
  }
}

4. 排查依赖版本兼容性 #

• 检查node-fetch-native版本与Nuxt/Webpack的匹配度，尝试升级或降级该包：

npm install node-fetch-native@latest

• 确保Node.js版本在12.0.0以上，ES私有类字段需要Node.js 12+支持。

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