5

我正在从使用资产管道迁移到 Rails 5.2 中的 webpacker。我的 AJAX 响应都Uncaught ReferenceError: $ is not defined在浏览器控制台中导致 rails-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)
4

3 回答 3

15

与此同时，我发现我做错了什么。我需要配置一个别名。我在文档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;
于 2019-05-07T14:10:50.367 回答
2

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

// jquery
import $ from 'jquery';
global.$ = $;
global.jQuery = $;
于 2019-12-15T15:27:33.030 回答
0

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

于 2019-08-04T06:01:25.690 回答