升级Webpacker 6后jQuery及其他插件无法正常工作

1. 修复rails-ujs has already been loaded!错误 #

Webpacker 6默认已自动加载@rails/ujs，你在ProvidePlugin中重复配置Rails: ["@rails/ujs"]会导致重复加载，直接移除该行即可：

new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery",
  Popper: ["popper.js", "default"],
  // 移除下面这行
  // Rails: ["@rails/ujs"],
}),

2. 解决$ is not defined错误 #

步骤1：确认依赖安装 #

确保已安装jquery和popper.js：

yarn add jquery popper.js

步骤2：调整Webpack配置 #

Webpacker 6推荐通过environment对象扩展配置，修改config/webpack/environment.js（而非base.js）来配置全局变量：

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

// 配置ProvidePlugin注入全局变量
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}));

// 将jQuery暴露到window全局对象（部分依赖可能需要）
environment.loaders.get('javascript').use.forEach(loader => {
  if (loader.loader === 'babel-loader') {
    loader.options.plugins.push(['transform-expose', {
      exposes: ['$', 'jQuery']
    }]);
  }
});

module.exports = environment;

步骤3：移除冗余插件 #

Webpacker 6已内置MiniCssExtractPlugin的处理逻辑，直接从customConfig.plugins中移除new MiniCssExtractPlugin()，避免配置冲突。

3. 验证修复 #

修改完成后重启Webpack开发服务器：

bin/webpack-dev-server

刷新页面后检查控制台，确认错误消失，jQuery及相关插件可正常调用。

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