simpackerとRails.ajax

Rails界隈にいる人でsimpackerを採用されている方はいらっしゃると思います。
オールドスタイルな実装を行うにあたり少し躓いたところを残します。

simpackerじゃなくても躓いている内容です。

form_withでremote: trueにしたにも関わらず、respond_to部分でundefinedが起きた。

app/views/users/index.html.erb

<%= form_with url: users_search_path, method: :get, remote: true do |form| %>
  〜
<% end %>

app/controllers/users_controller.rb

def search
  respond_to do |format|
    format.js
  end
end

app/views/users/search.js.erb

$("#id").html("<%= j(render partial: 'table', locals: { users: @users }) %>");

すると、rails-ujsないことがわかった。 当然、simpacker使っているので自分で調整しないといけない。

Rails.ajaxはそもそもjQueryがないと動かないのでjQueryも一緒に追加した。

npmインストール

npm install --save jquery popper.js
npm install --save @rails/ujs

app/javascript/application.js に追加

import 'jquery/dist/jquery.js'
import 'popper.js/dist/popper.js'
import Rails from '@Rails/ujs';
Rails.start();

webpacker.config.jsを修正する

const webpack = require('webpack');

  〜
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery/src/jquery',
      jQuery: 'jquery/src/jquery',
      Popper: ['popper.js', 'default'],
      Rails: ['@Rails/ujs']
    }),

github.com