Uncaught TypeError: $(...).modal is not a function in rails 6

Question

Getting this error in rails 6, in rails 5 it was a easy fix after updating the application to rails 6, including webpack this error is appear every where I try to close the model inside the js.erb files.

My files: pack/application.rb

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import "bootstrap";
import "./src/application.scss";
import "jquery"

file pack/src/application.scss

@import "~bootstrap/scss/bootstrap";

file config/webpack/environment.js

   const { environment } = require('@rails/webpacker')

    const webpack = require('webpack')
    environment.plugins.prepend('Provide',
        new webpack.ProvidePlugin({
            $: 'jquery/src/jquery',
            jQuery: 'jquery/src/jquery'
        })
    )
    module.exports = environment

I think maintain both Jquery via webpacker and the traditional way like we do in Rals 5 and 4 is the solution by using gems. — vidur punj, Dec 27 '20 at 20:22
Hi @vidur, Just wondering if you ever got this resolved using Rails 6 and webpacker? — Bradley, Feb 19 '21 at 09:19
link = https://stackoverflow.com/questions/58376431/how-to-use-custom-jquery-in-rails-6/61815188#61815188 — vidur punj, Aug 02 '21 at 20:01

chibeepatag · Answer 1 · 2023-05-18T03:21:05.537

0

The solution is here: [enter link description here][1] Change your environment.js to

environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
})

)

Two Jquerys was being loaded twice, on [1]: https://discuss.rubyonrails.org/t/webpacker-bootstrap-jquery-what-am-i-doing-wrong-and-why-so-hard/77105/4?u=chibeepatag

edited May 18 '23 at 03:21

answered May 18 '23 at 03:03

chibeepatag

39
3

Uncaught TypeError: $(...).modal is not a function in rails 6

1 Answers1