Миграция Rails из конвейера активов в Webpacker: Uncaught ReferenceError: $ не определено в rails-ujs.js - PullRequest
Новая
       28

Миграция Rails из конвейера активов в Webpacker: Uncaught ReferenceError: $ не определено в rails-ujs.js

0 голосов
/ 07 мая 2019

Я перехожу с использования конвейера ресурсов на webpacker в Rails 5.2. Все мои ответы AJAX вызывают Uncaught ReferenceError: $ is not defined в rails-ujs.js ошибках в консоли браузера.

Я настроил среду моего веб-упаковщика для включения 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;

Я импортировал rails-ujs и turbolinks в мой ../packs/application.js

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)

1 Ответ

1 голос
/ 07 мая 2019

Тем временем я выяснил, что я сделал не так. Мне нужно было настроить псевдоним. Я нашел решение в документах 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;
...