Rails (6.0.3.4) Webpacker (5.2.1) 包导入错误：“无法从非 EcmaScript 模块导入命名导出”

Question

我正在尝试将包导入到我的 Rails 6 项目 \xe2\x80\x93 我正在使用Rails 6.0.3.4gem webpacker 5.2.1。

\n

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

\n

我明白了：

\n

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

\n

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

\n

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

\n

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

\n

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

\n

修复如下所示：

\n

// /config/webpack/base.js\nconst { webpackConfig, merge } = require(\'@rails/webpacker\')\nconst fixConfig = require(\'./rules/fix\')\n\nmodule.exports = merge(webpackConfig, fixConfig)\n

\n

我需要帮助/指导来找出解决这个问题的方法。蒂亚！

\n

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.js和fix.js。