Heroku部署时Webpacker相关依赖警告问题求助

Hey there, no need to panic—those are just peer dependency warnings, not actual errors, which is why your Heroku deploy still finished successfully (you can see the Verifying deploy... done. line at the end). Peer dependency warnings pop up when a package you're using expects a specific version of another package, but your project has a different version installed. Let's walk through how to fix these step by step.

What's Going On Here? #

All those warnings boil down to outdated Webpack-related plugins. For example, babel-loader@7.1.2 is built to work with Webpack 2 or 3, but your project is likely using a newer Webpack version (since Webpacker typically pairs with Webpack 4+). These version mismatches don't break deployment right now, but they could cause unexpected bugs down the line.

Step-by-Step Fixes #

1. Upgrade Outdated Plugins #

Most of these warnings can be fixed by updating the problematic packages to versions that support your current Webpack setup. Here's what to target:

• babel-loader: Upgrade to v8.x+ (it supports Webpack 4+ and Babel 7)
• compression-webpack-plugin: Move to v2.x+ or higher
• extract-text-webpack-plugin: This plugin is deprecated for Webpack 4+—replace it with mini-css-extract-plugin instead
• file-loader: Update to v4.x+ or newer
• sass-loader: Upgrade to v7.x+ (and make sure node-sass is at least v4.0.0; alternatively, switch to the sass package which is actively maintained)
• uglifyjs-webpack-plugin: Move to v2.x+ (or use Webpack's built-in terser-webpack-plugin for Webpack 4+)
• webpack-manifest-plugin: Upgrade to v2.x+
• webpack-dev-server & webpack-dev-middleware: Update to versions compatible with your Webpack version

2. Run Update Commands #

If you're using Yarn (common in Rails/Webpacker projects), run these commands:
First, upgrade most plugins:

yarn upgrade babel-loader compression-webpack-plugin file-loader sass-loader uglifyjs-webpack-plugin webpack-manifest-plugin webpack-dev-server webpack-dev-middleware --latest

Then replace the deprecated extract-text-webpack-plugin:

yarn remove extract-text-webpack-plugin
yarn add mini-css-extract-plugin --dev

Don't forget to update your Webpack config file to use MiniCssExtractPlugin instead of the old ExtractTextPlugin—adjust the syntax to match the new plugin's requirements.

3. Handle Specific Edge Cases #

• postcss-cssnext warning: This package is no longer maintained. Replace it with postcss-preset-env (its official successor):

  yarn remove postcss-cssnext
  yarn add postcss-preset-env --dev
  

  Update your PostCSS config to use postcss-preset-env instead of postcss-cssnext.
• ajv-keywords@2.1.1 warning: It expects ajv@^5.0.0, but if your project uses ajv v6+, upgrade ajv-keywords to v3.x+:

  yarn upgrade ajv-keywords --latest
  

4. Test Locally First #

After updating dependencies, run yarn install locally to check if the warnings are gone. Then test your build (e.g., rails webpacker:compile for Rails apps) to make sure everything works without errors. Only push to Heroku once you've confirmed local builds are stable.

Why Did the Deploy Succeed Anyway? #

Heroku ignores peer dependency warnings because they're not fatal errors—they just flag potential compatibility risks. While your app works now, fixing these warnings will prevent weird bugs from popping up as you update your project in the future.

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