Rails 6.1+Webpacker升级jQuery 3.6.1后无法加载求助

以下是针对你遇到的$.fn、$.get未定义问题的排查和修复步骤：

1. 清理缓存（优先操作） #

升级依赖后缓存残留是常见诱因，先执行以下操作：

• 清理Webpack编译缓存：

  bin/webpacker clean
  

• 重启Rails服务器，并用浏览器无痕模式测试，避免浏览器缓存干扰。

2. 统一全局jQuery挂载方式 #

你当前同时使用webpack.ProvidePlugin和手动挂载global.$，可能导致冲突，可尝试以下两种调整方式：

方式A：依赖ProvidePlugin自动注入 #

修改app/javascript/packs/application.js，移除手动挂载代码：

import 'core-js/stable'
import 'regenerator-runtime/runtime'
// 仅导入jQuery，由ProvidePlugin处理全局挂载
import 'jquery'

同时更新config/webpack/environment.js的ProvidePlugin配置，补充window.$：

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

environment.loaders.prepend('erb', erb)
environment.plugins.append('Provide', new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    'window.$': 'jquery' // 新增这一行
}));
module.exports = environment;

方式B：手动指定全局挂载（避免ProvidePlugin冲突） #

如果方式A无效，尝试禁用ProvidePlugin，完全手动挂载：
修改config/webpack/environment.js，注释掉ProvidePlugin部分：

// environment.plugins.append('Provide', new webpack.ProvidePlugin({
//     $: 'jquery',
//     jQuery: 'jquery',
//     'window.jQuery': 'jquery'
// }));

然后在app/javascript/packs/application.js中调整挂载代码，兼容ES模块导出：

import 'core-js/stable'
import 'regenerator-runtime/runtime'
// 处理jQuery的ES模块导出
import * as jQuery from 'jquery'
global.$ = global.jQuery = jQuery.default || jQuery

或者改用CommonJS语法：

const jQuery = require('jquery')
global.$ = global.jQuery = jQuery

3. 重新安装jQuery确保依赖正常 #

如果上述步骤无效，先卸载并重新安装指定版本：

# 使用yarn
yarn remove jquery
yarn add jquery@3.6.1

# 或者使用npm
npm uninstall jquery
npm install jquery@3.6.1

4. 排查全局变量覆盖问题 #

如果问题仍存在，检查是否有其他前端脚本（比如第三方插件）修改了$或jQuery全局变量。可以在使用$.fn的代码前添加调试日志：

console.log('Current $:', $)
console.log('Current jQuery:', jQuery)

确认输出的是否为jQuery实例，而非其他对象。

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