Rails `webpack-dev-server` runs with an error "Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type"

Question

I have rails 6.1.7.5, webpacker 5 gem, and webpack 4. When I run ./bin/webpack-dev-server, it eventually shows this error:

ERROR in ./node_modules/@shopify/draggable/build/esm/shared/utils/closest/closest.mjs 26:22
Module parse failed: Unexpected token (26:22)
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
|       return current;
|     }
>     current = current?.parentNode || null;
|   } while (current != null && current !== document.body && current !== document);
|   return null;
 @ ./node_modules/@shopify/draggable/build/esm/Draggable/Draggable.mjs 1:0-58 220:42-49 283:13-20 284:35-42 405:34-41
 @ ./node_modules/@shopify/draggable/build/esm/index.mjs
 @ ./app/javascript/theme/checklist.js
 @ ./app/javascript/theme/theme.js
 @ ./app/javascript/packs/application.js

I tried to add a loader as described here: https://stackoverflow.com/a/64907659/3557118 It didn't help. Also I have .mjs extension in the list of extensions in webpacker.yml.

Here is how my webpack config looks like (deleted some paths with names):

ConfigObject {
  mode: 'development',
  output: {
    filename: 'js/[name]-[hash].js',
    chunkFilename: 'js/[name]-[contenthash].chunk.js',
    hotUpdateChunkFilename: 'js/[id]-[hash].hot-update.js',
    path: '......../public/packs',
    publicPath: '/packs/'
  },
  resolve: {
    extensions: [
      '.js',          '.mjs',
      '.sass',        '.scss',
      '.css',         '.module.sass',
      '.module.scss', '.module.css',
      '.png',         '.svg',
      '.gif',         '.jpeg',
      '.jpg'
    ],
    plugins: [ [Object] ],
    alias: {
      jquery: 'jquery-ui-dist/external/jquery/jquery.js',
      'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
    },
    modules: [ '....../app/javascript', 'node_modules' ]
  },
  resolveLoader: { modules: [ 'node_modules' ], plugins: [ [Object] ] },
  node: {
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  },
  devtool: 'cheap-module-source-map',
  entry: {
    application: ...,
    applicationAdmin: ...,
    applicationAmbassador: ...,
    applicationClient: ...,
    applicationFund: ...,
    applicationInstaller: ...
  },
  module: {
    strictExportPresence: true,
    rules: [ [Object], [Object], [Object], [Object], [Object], [Object] ]
  },
  plugins: [
    ProvidePlugin { definitions: [Object] },
    EnvironmentPlugin { keys: [Array], defaultValues: [Object] },
    CaseSensitivePathsPlugin {
      options: {},
      logger: [Object [console]],
      pathCache: Map(0) {},
      fsOperations: 0,
      primed: false
    },
    MiniCssExtractPlugin { options: [Object] },
    WebpackAssetsManifest {
      hooks: [Object],
      options: [Object],
      assets: [Object: null prototype] {},
      assetNames: Map(0) {},
      currentAsset: null,
      compiler: null,
      stats: null,
      hmrRegex: null,
      [Symbol(isMerging)]: false
    }
  ]
}

Answer 1

Looks like Elvis operator issue

That's because Webpack 4 doesn't support it without adding optional chaining to Babel, or setting an acorn (JavaScript parser) resolution

Possible solutions is to correct package.json

{
  // ...
  "resolutions": {
    "acorn": "8.7.1"
  }
}

or

{
  // ...
  "resolutions": {
    "acorn": "npm:acorn-with-stage3"
  }
}

or add @babel/plugin-proposal-optional-chaining and @babel/plugin-proposal-nullish-coalescing-operator plugins to config

See also GitHub issues:

1. Webpack

2. Turbo