Bamboo构建时postcss-loader报Unexpected token '?'语法错误

错误信息 #

const overrideOptions = metaConfig.config ?? {};
30-Aug-2023 15:37:50                                                 ^
30-Aug-2023 15:37:50    
30-Aug-2023 15:37:50    SyntaxError: Unexpected token '?'
30-Aug-2023 15:37:50        at compileFunction (<anonymous>)
30-Aug-2023 15:37:50        at wrapSafe (internal/modules/cjs/loader.js:1072:16)
30-Aug-2023 15:37:50        at Module._compile (internal/modules/cjs/loader.js:1122:27)
30-Aug-2023 15:37:50        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
30-Aug-2023 15:37:50        at Module.load (internal/modules/cjs/loader.js:1002:32)
30-Aug-2023 15:37:50        at Function.Module._load (internal/modules/cjs/loader.js:901:14)
30-Aug-2023 15:37:50        at Module.require (internal/modules/cjs/loader.js:1044:19)
30-Aug-2023 15:37:50        at require (internal/modules/cjs/helpers.js:77:18)
30-Aug-2023 15:37:50        at Object.<anonymous> (/home/bamboo/bamboo-agent-home/xml-data/build-dir/CMSG-NLFSNAPSHOT19-JOB1/kiwi/src/main/ux/node_modules/postcss-loader/dist/utils.js:18:20)
30-Aug-2023 15:37:50        at Module._compile (internal/modules/cjs/loader.js:1158:30)

问题根源 #

当前使用的postcss-loader@7.3.3代码中用到了ES2020的空值合并运算符（??），而Bamboo构建环境的Node.js版本低于14.0.0（该版本才开始原生支持??语法），导致Node.js无法解析这个语法抛出错误。所谓Webpack 5无法解析的说法不准确，本质是Node.js版本不兼容。

解决方案 #

• 方案1：升级Node.js版本
  将Bamboo构建环境的Node.js升级到14.0.0或更高的LTS版本（比如16.x、18.x），原生支持ES2020语法后即可解决。
• 方案2：降级postcss-loader版本
  如果无法升级Node.js，可将postcss-loader降级到兼容旧Node.js版本的系列，比如postcss-loader@6.x（v6版本未使用ES2020语法，支持Node.js 12及以上）。执行以下命令：

  npm install postcss-loader@6 --save-dev
  # 或者用yarn
  yarn add postcss-loader@6 --dev
  

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