升级Node后Webpack报错：Module parse failed: Unexpected token 求助

我在排查Webpack编译错误时，执行命令 bin/webpack --colors --progress 出现以下错误：

ERROR in ./node_modules/@flatfile/sdk/dist/index.js 351:361
Module parse failed: Unexpected token (351:361)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|           class v extends i {
|             constructor(e, t) {
>               super(e), r(this, "code", "FF-UA-00"), r(this, "name", "UnauthorizedError"), r(this, "debug", "The JWT was not signed with a recognized private key or you did not provide the necessary information to identify the end user"), r(this, "userMessage", "There was an issue establishing a secure import session."), e && (this.debug = e), this.code = t ?? "FF-UA-00";
|             }
|           }
 @ ./app/javascript/src/app/pages/content_assets/Index.vue?vue&type=script&lang=ts& (./node_modules/babel-loader/lib??ref--8-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/src/app/pages/content_assets/Index.vue?vue&type=script&lang=ts&) 22:0-41 125:6-14
 @ ./app/javascript/src/app/pages/content_assets/Index.vue?vue&type=script&lang=ts&
 @ ./app/javascript/src/app/pages/content_assets/Index.vue
 @ ./app/javascript/packs/app.js

相关环境与信息 #

• 发现Flatfile项目有疑似相同问题，问题描述为：

看起来/dist目录输出了ES2020代码，我的cra babel loader无法解析，需要在webpack配置中添加对应路径来修复。

• 当前使用Node v16.13.1
• 基于Rails项目，通过@rails/webpacker": "5.4.3"使用Webpack，该包依赖webpack@4.46.0
• 切换到Node v14x并删除node_modules、yarn.lock后重新执行yarn install，Webpack可成功编译
• 错误提示的行号（351:361）在node_modules/@flatfile/sdk/dist/index.js中不存在
• 每次执行yarn install前都会删除node_modules和yarn.lock，确保重新下载依赖
• 项目的babel.config.js内容如下：

module.exports = function(api) {
  var validEnv = ['development', 'test', 'production']
  var currentEnv = api.env()
  var isDevelopmentEnv = api.env('development')
  var isProductionEnv = api.env('production')
  var isTestEnv = api.env('test')

  if (!validEnv.includes(currentEnv)) {
    throw new Error(
      'Please specify a valid `NODE_ENV` or ' +
        '`BABEL_ENV` environment variables. Valid values are "development", ' +
        '"test", and "production". Instead, received: ' +
        JSON.stringify(currentEnv) +
        '.'
    )
  }

  return {
    presets: [
      isTestEnv && [
        '@babel/preset-env',
        {
          targets: {
            node: 'current'
          }
        }
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        '@babel/preset-env',
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
          corejs: 3,
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ],
      ["babel-preset-typescript-vue", { "allExtensions": true, "isTSX": true }]
    ].filter(Boolean),
    plugins: [
      'babel-plugin-macros',
      '@babel/plugin-syntax-dynamic-import',
      isTestEnv && 'babel-plugin-dynamic-import-node',
      '@babel/plugin-transform-destructuring',
      [
        '@babel/plugin-proposal-class-properties',
        {
          loose: true
        }
      ],
      [
        '@babel/plugin-proposal-object-rest-spread',
        {
          useBuiltIns: true
        }
      ],
      [
        '@babel/plugin-transform-runtime',
        {
          helpers: false,
          regenerator: true,
          corejs: false
        }
      ],
      [
        '@babel/plugin-transform-regenerator',
        {
          async: false
        }
      ]
    ].filter(Boolean)
  }
}

疑问 #

1. 为何仅改变Node版本就会导致Webpack行为不同？我们并未更改Webpack版本或引发错误的@flatfile包版本
2. 为何错误指向的行在包文件中不存在？这是否是缓存问题的迹象？
3. 上述提到的解决方案（在webpack配置中添加对应路径让babel处理）是否对我的问题有参考价值？

问题解答 #

1. Node版本影响Webpack编译的原因

核心是Node版本间接影响了Babel的转译逻辑。你的@babel/preset-env在生产/开发环境下未指定明确的Node目标版本，默认会根据当前运行的Node版本推断需要转译的语法：

• Node 16原生支持ES2020的空值合并运算符（??），Babel会跳过对该语法的转译；但Webpack 4本身不支持解析ES2020语法，导致未转译的??触发解析错误。
• Node 14对??的支持有限（14.0.0才开始支持），Babel会自动将其转译为低版本兼容代码，Webpack就能正常解析。
  另外，Webpack 4在不同Node版本下的内部检查逻辑有差异，Node 16环境下可能会跳过对原生支持语法的转译校验，放大了这个问题。

2. 错误行号不匹配的原因及是否为缓存问题

大概率是缓存问题，但不是你手动删除的node_modules/yarn.lock缓存，而是：

• Webpack模块缓存：Webpack会缓存已处理的模块，若@flatfile包存在隐式更新（比如CDN缓存的不同版本），缓存中的旧模块内容会导致错误行号与新下载文件不匹配。
• Babel编译缓存：node_modules/.cache/babel-loader目录的缓存未清理，即使删除了node_modules，这个目录可能保留，导致Babel处理的是旧模块内容。
  另外，@flatfile的dist/index.js可能是压缩后的代码，错误行号对应压缩前的源码，也会导致行号不匹配，但结合切换Node版本后恢复正常的情况，缓存因素占主导。

3. GitHub方案的参考价值

完全有参考价值，你的问题和该issue本质一致：@flatfile/sdk的dist目录输出了未完全转译的ES2020代码，而你的Babel默认不会处理node_modules下的文件，导致Webpack无法解析。

具体可参考的操作：

• 在Webpacker配置文件（比如config/webpack/environment.js）中，修改babel-loader规则，将@flatfile/sdk加入转译路径：

const { environment } = require('@rails/webpacker')

environment.loaders.get('babel').include.push(/@flatfile\/sdk/)

module.exports = environment

• 同时建议在@babel/preset-env的targets中明确指定兼容的Node版本（比如node: '14'），避免依赖Node版本的自动推断，消除版本切换带来的差异。

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