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) package import error: `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`
【发布时间】：2021-01-31 17:45:33
【问题描述】：

我正在尝试将 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"
      }
    ]
  }
}

我需要帮助/指导来解决这个问题。蒂亚！

【问题讨论】：

标签： ruby-on-rails-6 webpacker

【解决方案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。

【讨论】：