将Rails从资产管道迁移到Webpacker:未捕获ReferenceError：$未在rails-ujs.js中定义
我正在从使用asset管道迁移到Rails 5.2中的webpacker。我的AJAX响应都会导致浏览器控制台中的Uncaught ReferenceError: $ is not defined -ujs.js错误。
我已经将我的webpacker环境设置为包含jquery。
const { environment } = require('@rails/webpacker');
const webpack = require('webpack');
environment.plugins.append("Provide", new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
}));
module.exports = environment;我在../packs/application.js中导入了rails-ujs和turbolinks
import Rails from 'rails-ujs'
import 'activestorage'
import 'bootstrap'
...
import Turbolinks from "turbolinks"
Rails.start();
Turbolinks.start();
// Import application specific stuff
import 'application/javascripts'然后，当请求完成时，我尝试添加一个类。与rails指南https://guides.rubyonrails.org/working_with_javascript_in_rails.html#server-side-concerns中显示的内容类似
我的show.js.erb文件如下所示
$("#result").addClass("active")我得到一个错误
Uncaught ReferenceError: $ is not defined
at <anonymous>:1:1
at processResponse (rails-ujs.js:282)
at rails-ujs.js:195
at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js:263)回答 3
Stack Overflow用户
发布于 2019-05-07 22:10:50
在此期间，我发现我做错了什么。我需要配置一个别名。我在https://github.com/rails/webpacker/blob/master/docs/webpack.md#configuration文档中找到了解决方案
在我的/config/webpacker/environment.js中添加environment.config.set('resolve.alias', {jquery: 'jquery/src/jquery'});就行了。
const { environment } = require('@rails/webpacker');
const webpack = require('webpack');
environment.plugins.append("Provide", new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
}));
environment.config.set('resolve.alias', {jquery: 'jquery/src/jquery'});
module.exports = environment;Stack Overflow用户
发布于 2019-12-15 23:27:33
在app/javascript/packs/application.js中尝试
// jquery
import $ from 'jquery';
global.$ = $;
global.jQuery = $;Stack Overflow用户
发布于 2019-08-04 14:01:26
感谢分享这篇文章。就像一个护身符。要添加到您的答案中，有一个名为node_modules的文件夹。其中包含jquery/src/jquery.js文件。该文件就是上面这行代码所引用的文件。我是JS的新手，所以请原谅我的无知。据我所知，这个文件返回一个名为jQuery的函数。当我们写的时候
environment.plugins.append("Provide", new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
}));我们把事情搞砸了。这基本上意味着$= 'jquery‘，目前还没有定义。接下来，我定义jQuery = 'jquery‘。所以jquery仍然没有定义。因此，我们必须通过添加该行来定义别名。
但如果我写
environment.plugins.append("Provide", new webpack.ProvidePlugin({
jquery: jQuery,
$: 'jquery',
Popper: ['popper.js', 'default']
}));这样我就不需要添加定义别名的代码了。你的解决方案和这对我都有效。正如我所说的，我对JS非常陌生，我不能说这是否是正确的解决方案。
https://stackoverflow.com/questions/56022108
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号