通过Webpacker 4引入mdbootstrap失败求助

这个问题我之前帮同行排查过，本质是模块格式混用导致的冲突，完全不用等官方补丁，调整Webpacker的配置就能搞定！

错误原因 #

mdbootstrap v4.10.1的代码里同时混用了CommonJS（module.exports）和ES模块（import/export）语法，而Webpacker默认的Babel配置没有处理这种混合场景，导致Webpack在打包时出现导出对象的读写权限冲突，也就是你看到的Firefox/Chrome里的只读错误。

具体解决步骤 #

1. 安装Babel转换插件 #

首先安装@babel/plugin-transform-modules-commonjs，这个插件能帮我们统一模块格式，消除冲突：

yarn add @babel/plugin-transform-modules-commonjs --dev

2. 修改Webpacker环境配置 #

打开config/webpack/environment.js，把刚才安装的插件添加到Babel loader的配置中：

const { environment } = require('@rails/webpacker')

// 添加处理模块格式冲突的插件
environment.loaders.get('babel').use[0].options.plugins.push(
  '@babel/plugin-transform-modules-commonjs'
)

module.exports = environment

3. （可选）调整导入方式 #

如果上面的配置生效了，这一步可以跳过。要是还存在问题，试试把app/javascript/packs/application.js里的ES模块导入改成CommonJS风格：

// 替换原来的import语句
const mdb = require('mdbootstrap')
window.mdb = mdb

验证修复 #

执行bin/webpack重新打包，或者重启Rails服务器，打开页面检查控制台，应该就不会再出现那个只读错误了。

内容的提问来源于stack exchange，提问作者yoones