Javascript compilation in Ruby on Rails 6

Question

I'm using RoR 6.1.0, and would like to add a Javascript library. As a test case, I'll try to add JQuery. I am using webpacker to manage the Javascript libraries in my app.

First I use yarn to add jquery to the project:

yarn add jquery

Next I import jquery in the webpacker application entry point, app/javascript/packs/application.js. The second line verifies the import:

import jQuery from "jquery";
console.log(jQuery.fn.jquery);

My custom javascript files are saved in app/asets/javascripts. I create the file app/assets/javascripts/test.js as:

import jQuery from "jquery";

function test() {
    console.log(jQuery.fn.jquery)
}

Finally, in my view, I include test.js and assign the function to a button:

<%= javascript_include_tag('test.js') %>
<button onclick="test()">Button</button>

On page load, the console displays the following error: Uncaught SyntaxError: Cannot use import statement outside a module. I think this means the file test.js is not being processed by the ES6 compiler. How can I make sure that the javascript files in app/assets/javascript are compiled properly?

Answer 1

If you are using webpacker and you want to include js files in your views/layouts then you have to use javascript_pack_tag. All these files (called entries) should be under /packs (or where you set the source_path & source_entry_path in your webpacker.yml). The entries should import or require different files (bundle them) then webpacker will prepare them to be browser ready (babel, loaders, transpiling, etc..)

Create app/javascript/packs/test.js and add these:

 require('app/assets/javascripts/test.js')

This should fix the complilation issue. Webpacker has resolved_paths: [] in webpacaker.yml where you can add different paths to look for files. You can add app/assets/javascripts and change to:

require('test.js')

Now clicking that button. If you want to do it that way then test() should be on window. Another option is to bind an onClick event for that button at document ready. There are other options but these 2 are the easy ones.