Ruby on Rails 6 Webpack with Javascript libraries

Question

I am building a new project in Rails 6. I have a front-end library I want to use (@tarekraafat/autocomplete.js) that is installed by yarn and exists in my node_modules directory, but is not being made available to other JS code in the browser. Here is what I have set up currently:

/package.json:

"dependencies": {
  "@tarekraafat/autocomplete.js": "^8.2.1"
}

/app/javascript/packs/application.js:

import "@tarekraafat/autocomplete.js/dist/js/autoComplete.min.js"

/app/views/.../example.html.erb

<script type="text/javascript">
  window.onload = () => {
    new autoComplete({
      [...]
    });
  };
</script>

I am getting an error in the browser pointing to the new autoComplete():

Uncaught ReferenceError: autoComplete is not defined

Some reading seems to indicate that I need to modify the /config/webpack/environment.js file, in which I have tried various versions of the following with no luck (including restarting the dev server):

/config/webpack/environment.js:

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

const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        autoComplete: 'autocomplete.js'
    })
);

module.exports = environment

First, what do I need to do to add this library so it can be used correctly? Second, as someone who has not directly used webpack previously, what is the function of adding this definition to the environments.js file, and why don't I need to do it for some libraries (bootstrap, popper) but I do for others (jquery, and maybe autocomplete.js)?

question from:https://stackoverflow.com/questions/65601765/ruby-on-rails-6-webpack-with-javascript-libraries

Answer 1

In Webpacker, the usage of this library would be as follows:

// app/javascript/src/any_file.js

import autoComplete from "@tarekraafat/autocomplete"

new autoComplete(...)


// app/javascript/packs/application.js

import "../src/any_file"

This alone does not import the autoComplete variable into the global scope. To do that, the simplest thing is assign the variable to window from within your webpack dependency graph.

// app/javascript/src/any_file.js

import autoComplete from "@tarekraafat/autocomplete"

window.autoComplete = autoComplete

As an aside, you don't need to use the ProvidePlugin configuration for this library. The ProvidePlugin says: “add this import to all files in my dependency graph.” This might be helpful for something like jQuery to make legacy jQuery plugins work in webpack. It is not necessary to make your autocomplete lib work