Rails 6通过Webpacker导入gist-client JS库报错如何解决？

错误原因 #

你遇到的报错是因为gist-client库的打包产物混用了CommonJS的module.exports语法和ES Module语法，Webpack检测到ES Module相关特征后会将文件标记为ES Module模式，该模式下exports是只读属性，无法被CommonJS语法赋值，因此触发报错。

可行解决方案 #

方案1：修改Webpacker配置强制该库按CommonJS解析 #

这是兼容性最好的方案，操作步骤如下：

1. 打开项目根目录下的config/webpack/environment.js文件
2. 在原有代码基础上新增针对gist-client的解析规则，修改后完整配置参考：

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

// 新增gist-client解析规则
environment.loaders.append('gist-client', {
  test: /node_modules[\\/]gist-client[\\/].*\.js$/,
  parser: {
    amd: false,
    commonjs: true,
    harmony: false // 禁用ES Module解析，强制走CommonJS逻辑
  }
})

module.exports = environment

3. 关闭正在运行的webpack-dev-server，重启服务重新编译后即可正常导入。
4. 在application.js中正常导入即可使用：

const GistClient = require("gist-client")
// 或ES import语法
import GistClient from 'gist-client'

方案2：直接引入UMD预编译产物 #

如果方案1不生效，可以直接导入库已经打包好的UMD版本，跳过模块解析逻辑：
在application.js中修改导入语句为：

require("gist-client/dist/gist-client.min.js")

导入后GistClient会直接挂载到全局window对象上，直接调用window.GistClient即可使用。

额外优化建议 #

你当前的application.js是Webpack的入口文件，里面的//= require是Sprockets资产管道的语法，Webpack不会识别执行，如果你需要用到jQuery、Bootstrap等依赖，建议统一通过Webpack配置导入，避免两套资产体系混用出现冲突。

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