问题描述
我正在尝试将 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
。