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)?

rossta · Accepted Answer · 2021-01-07 03:15:55Z

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

edited Jan 7, 2021 at 3:15

answered Jan 6, 2021 at 23:51

rossta

11.5k1 gold badge45 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

RedBassett Over a year ago

Thank you! I can't import in the usage location because it's embedded javascript in HTML, but I did the import in /app/javascript/packs/... and do the window.assign there, which brought it into scope for the embedded JS. What is the context in which plugins need to be declared in the environment.js file?

rossta Over a year ago

Look closely, my example is part of the webpack dependency graph, not embedded html.

rossta Over a year ago

Updated my answer with regards to the ProvidePlugin.

RedBassett Over a year ago

I was misreading the import as a necessary step put in an external JS file to expose the library to the embedded JS scope, but I see now that it is just an example of how to access the library if needed from a file in that location. Thanks for the update on ProvidePlugin, makes sense!

Collectives™ on Stack Overflow

Ruby on Rails 6 Webpack with Javascript libraries

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related