Rails 6+Webpacker部署Passenger时出现jquery undefined错误如何解决？

你遇到的两个报错本质都是同一个原因：部署环境的Node.js在服务端直接执行了前端打包后的JS文件，而非浏览器端加载执行。前端依赖的浏览器全局对象（window、document、Bootstrap依赖的jQuery.fn属性等）在Node运行环境中不存在，所以触发报错。
本地Puma运行正常是因为本地不会在服务端执行前端JS，只有用户浏览器加载时才会执行。

1. 修正Webpack ProvidePlugin配置 #

你当前的config/webpack/environment.js配置存在两处问题：引入jQuery路径错误、没有把jQuery挂载到window对象供Bootstrap识别，修改为以下内容：

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

environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      Popper: ['popper.js', 'default']
    })
);

module.exports = environment

2. 调整application.js代码 #

• 删掉app/javascript/packs/application.js里的require('jquery')行，ProvidePlugin已经自动注入jQuery，不需要手动引入
• 删掉你后来添加的window判断逻辑：import语句会被提升到代码最顶层执行，你加的if判断不会生效，反而会导致逻辑混乱，恢复原来的import写法即可

3. 修正Passenger部署配置 #

确认你的虚拟主机Passenger配置：

• 应用类型指定为ruby，不要被自动识别为Node.js应用
• 检查项目根目录下是否存在server.js、app.js这类Node应用入口文件，Passenger会自动识别这类文件启动Node服务，存在的话删除或重命名即可

4. 重新打包静态资源 #

部署前执行以下命令清理旧资源、重新打包：

RAILS_ENV=production bundle exec rails assets:clobber assets:precompile

执行完成后重启应用即可。

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