After upgrade to node 16, i am facing this error, Module parse failed: Unexpected token (40:35)

Question

Failed to compile.

./node_modules/lib0/logging.js 40:35
Module parse failed: Unexpected token (40:35)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /* c8 ignore start */
| const computeBrowserLoggingArgs = (args) => {
>   if (args.length === 1 && args[0]?.constructor === Function) {
|     args = /** @type {Array<string|Symbol|Object|number>} */ (/** @type {[function]} */ (args)[0]())
|   }

Answer 1

JavaScript throws a syntax error when it encounters code that doesn't follow its expected structure. This typically happens when the parser encounters a feature or construct it doesn't recognize.

In this specific case, the error is likely caused by optional chaining (?.) Introduced in ECMAScript 2020, this feature allows you to safely access the properties of an object, even if the object itself is null or undefined. This avoids potential errors that could occur if you tried to access properties directly without checking for these null values.

If you're encountering this error, it's likely because you're trying to use optional chaining in an environment that doesn't support it.

You can resolve this by updating your Webpack configuration.

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules\/(?!lib0)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};