Question

我正在从使用资产管道迁移到Rails 5.2中的webpacker。我的AJAX响应都导致浏览器控制台中的rails-ujs.js错误Uncaught ReferenceError: $ is not defined。

我已经设置了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'

然后，当请求完成时，我尝试添加一个类。与导轨中的显示类似 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)

Answer 1

同时，我发现自己做错了什么。我需要配置一个别名。我在文档https://github.com/rails/webpacker/blob/master/docs/webpack.md#configuration

中找到了解决方案

在我的environment.config.set('resolve.alias', {jquery: 'jquery/src/jquery'});上添加/config/webpacker/environment.js就可以了。

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;

Answer 2

感谢分享。像魅力一样工作。要添加到答案中，有一个名为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非常陌生，我不能说这是否是正确的解决方案。

Answer 3

尝试app/javascript/packs/application.js：

// jquery
import $ from 'jquery';
global.$ = $;
global.jQuery = $;

将Rails从Asset Pipeline迁移到Webpacker：Uncaught ReferenceError：在rails-ujs.js中未定义$

3 个答案: