Rails (6.0.3.4) Webpacker (5.2.1) 包导入错误：`Can't import the named export from non EcmaScript module`

如何解决Rails (6.0.3.4) Webpacker (5.2.1) 包导入错误：`Can't import the named export from non EcmaScript module`

我正在尝试将 package 导入到我的 Rails 6 项目中 - 我正在使用 Rails 6.0.3.4 和 webpacker 5.2.1 gem。

安装包yarn add @shopify/react-form
它被导入到文件 import {useForm,useField} from '@shopify/react-form';
现在运行 ./bin/webpack-dev-server

我明白了：

ERROR in ./node_modules/@shopify/react-form/build/esm/validation/validator.mjs 35:25-32
Can't import the named export 'isEmpty' from non EcmaScript module (only default export is available)

还有一些相同的错误，但文件名不同。

我在 another issue 上读到向 webpack 添加新规则可以解决该问题，因此我按照 webpacker README 中的说明进行操作：

问题是我没有 /config/webpack/base.js，无论如何我创建并在 rules 目录旁边创建了一个 /config/webpack/ 目录，所以我的 base.js 看起来像这样:

// /config/webpack/base.js
const { webpackConfig,merge } = require('@rails/webpacker')
const fixConfig = require('./rules/fix')

module.exports = merge(webpackConfig,fixConfig)

修复看起来像这样：

// /config/webpack/rules/fix.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.mjs$/,include: /node_modules/,type: "javascript/auto"
      }
    ]
  }
}

我需要帮助/指导来找出解决这个问题的热点。 TIA！

解决方法

我设法修复了错误，这个 article 引导我弄清楚如何将新规则合并到 webpack 配置中。

这是environment.js现在的样子：

// /config/webpack/environment.js
const { environment } = require('@rails/webpacker')

environment.config.merge({
  module: {
    rules: [
      {
        test: /\.mjs$/,include: /node_modules/,type: "javascript/auto"
      }
    ]
  }
})

module.exports = environment

以前：

const { environment } = require('@rails/webpacker')

module.exports = environment

我最终删除了 base.js 和 fix.js。