我有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

我尝试添加一个加载器，如下所述：https://stackoverflow.com/a/64907659/3557118它没有帮助。另外，我在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
    }
  ]
}