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

Question

我正在尝试将一个包Rails 6.0.3.4导入到我的 Rails 6 项目中——我正在使用webpacker 5.2.1gem。

• 安装包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)

还有更多相同的错误但文件名不同。

我在另一个问题上读到添加新规则webpack可以解决问题，所以我按照webpacker自述文件中的说明进行操作：

问题是我没有/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-6webpacker

Answer 1

我设法修复了错误，这篇文章指导我弄清楚如何将新规则合并到 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.jsand fix.js。