Rails webpack-dev-server启动报错：Module parse failed（缺失Loader）

我使用 Rails 6.1.7.5、webpacker 5 gem 和 webpack 4，运行./bin/webpack-dev-server时出现如下错误：

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

已做以下尝试但问题未解决：

• 尝试添加Loader（参考过相关方案）
• 在webpacker.yml的扩展名列表中配置了.mjs

以下是我的webpack配置信息（已删除部分路径名称）：

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
    }
  ]
}

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