How to add custom JS in Rails Webpack

Question

I'm working on a rails 5.2 project. I am moving all my assets from Assetpipeline to Webpack. I've:

• installed webpacker gem
• installed yarn
• added all the front gem in the dependencies in package.json with yarn add ...
• created a folder with all the javascripts files I need
• required the main JS file in app/javascript/packs/application.js

All those JS files comes from a template from colorlib, which works great with assetpipeline. My CSS is working fine with webpack but I've got errors with JS files in browser console, I get "Uncaught TypeError:" For example : Uncaught TypeError: $(...).metisMenu is not a function.

I'm guessing, there is no links between all my JS files, and when the metisMenu function (for example) is called in my main JS file, that function is not loaded and I get the error.

Maybe I've missed some Webpack configuration somewhere.

Here is my app/javascript directory tree:

.
├── channels
├── js
│?? ├── hyper.js
│?? ├── ui
│?? │?? ├── component.chat.js
│?? │?? ├── component.dragula.js
│?? │?? ├── component.fileupload.js
│?? │?? └── component.todo.js
│?? └── vendor
│??     ├── bootstrap.bundle.js
│??     ├── bootstrap-maxlength.min.js
│??     ├── bootstrap-timepicker.min.js
│??     ├── daterangepicker.js
│??     ├── jquery.bootstrap-touchspin.min.js
│??     ├── jquery.bootstrap.wizard.min.js
│??     ├── jquery.js
│??     ├── jquery.mask.min.js
│??     ├── jquery.slimscroll.js
│??     ├── jquery.toast.min.js
│??     ├── metisMenu.js
│??     ├── moment.js
│??     └── select2.min.js
├── packs
│?? ├── application.js
│?? └── cable.js
└── stylesheets
    ├── app-dark.css
    ├── application.css
    ├── icons.css
    └── vendor
        ├── britecharts.min.css
        ├── buttons.bootstrap4.css
        ├── dataTables.bootstrap4.css
        ├── fullcalendar.min.css
        ├── jquery-jvectormap-1.2.2.css
        ├── responsive.bootstrap4.css
        ├── select.bootstrap4.css
        ├── simplemde.min.css
        └── summernote-bs4.css

and here is my application.js file

/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb

import Rails from 'rails-ujs';
import Turbolinks from 'turbolinks';
import * as ActiveStorage from 'activestorage';

Rails.start()
Turbolinks.start()
ActiveStorage.start()


require("js/hyper");

// CSS
import '../stylesheets/application'

// Images
const images = require.context('../images', true)
const imagePath = (name) => images(name, true)

window.jQuery = $;
window.$ = $;

Has anybody already done that kind of work on rails?

question from:https://stackoverflow.com/questions/65621704/how-to-add-custom-js-in-rails-webpack

Answer 1

Waitting for answers