Rails (6.0.3.4) Webpacker (5.2.1) package import error: `Can't import the named export from non EcmaScript module`

Question

我正在尝试将 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 自述文件中的说明进行操作：

问题是我没有 /config/webpack/base.js，无论如何我创建了 rules 目录并在 /config/webpack/ 目录中创建了一个 rules 目录，所以我的 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"
      }
    ]
  }
}

我需要 help/guidance 找出热点来解决这个问题。 TIA！

Answer 1

我设法修复了错误，这 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。

Rails (6.0.3.4) Webpacker (5.2.1) package import error: `Can't import the named export from non EcmaScript module`

Rails (6.0.3.4) Webpacker (5.2.1) package import error: `Can't import the named export from non EcmaScript module`

webpacker

ruby-on-rails-6