无法将Rails应用部署至Heroku：Webpack配置加载失败

问题详情 #

部署Rails 6应用到Heroku时，已配置Ruby buildpack和Git远程仓库，但首次部署触发Webpack编译失败，错误日志如下：

Compiling...
Compilation failed:
[webpack-cli] Failed to load '/tmp/build_a66eb654/config/webpack/production.js' config
[webpack-cli] TypeError: Cannot read properties of undefined (reading 'plugins')
at Object. (/tmp/build_a66eb654/config/webpack/environment.js:6:13)

环境版本信息：

• heroku stack: heroku-20
• Rails: 6.0.6.1
• Ruby: 2.7.5p203 (2021-11-24 revision f69aeb8314) [x86_64-darwin22]
• npm: 6.14.7
• Node.js: v12.21.0

已尝试调整production.js中.toWebpackConfig()的有无，以及参考相关问答修改配置，均未解决问题。相关配置文件如下：

config/webpack/production.js #

process.env.NODE_ENV = process.env.NODE_ENV || 'production'

const environment = require('./environment')

module.exports = environment.toWebpackConfig()

config/webpack/environment.js #

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

// Add the following lines
const webpack = require("webpack")

environment.plugins.append("Provide", new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']  // Not a typo, we're still using popper.js here
}))
// End new addition

module.exports = environment

解决方法 #

1. 补充Node.js Buildpack #

Webpack编译依赖Node环境，需确保Heroku同时安装Node和Ruby buildpack，且Node buildpack优先级更高：

heroku buildpacks:add --index 1 heroku/nodejs -a 你的应用名称
heroku buildpacks:add --index 2 heroku/ruby -a 你的应用名称

2. 清理Heroku缓存 #

旧缓存可能导致依赖冲突，清理后重新部署：

heroku repo:purge_cache -a 你的应用名称
git commit --allow-empty -m "清理Heroku缓存"
git push heroku main

3. 校验Webpacker与依赖版本兼容性 #

Rails 6.0.6.1需搭配对应版本的Webpacker（推荐~5.4.0），执行以下命令更新依赖：

# 更新Ruby端Webpacker
bundle update webpacker
# 更新Node端依赖
npm install

同时检查package.json中webpack和webpack-cli版本，Webpacker 5.x需对应webpack@^5.0.0、webpack-cli@^4.0.0，版本不符则更新：

npm install webpack@^5.0.0 webpack-cli@^4.0.0 --save-dev

4. 优化Environment.js配置 #

添加空值判断避免plugins未定义报错：

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

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

module.exports = environment;

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