How do I use ProvidePlugin with the webpacker gem?

[dbpqdb]

Per my stackoverflow question, I'm trying to use a package from yarn (vue-introjs) which requires the introJs plugin (from the intro.js package) to work. Feel free to answer there to take the bounty if you know how to do this.

The vue-introjs plugin documentation gives the following example webpack configuration which is necessary for the plugin to work:

// webpack.config.js
{
    plugins: [
        new webpack.ProvidePlugin({
            // other modules
            introJs: ['intro.js', 'introJs']
        })
    ]
}

I've been trying multiple says to make this work with the webpacker gem but I haven't found how to do it. I've tried just putting import introJs from 'intro.js' in the top of my Vue file but that didn't work either, when I try to call app.$intro() it just throws ReferenceError: introJs is not defined

So, can anyone point me in the right direction for how to include the introJs plugin?

[rossta]

Here's how I would start with configuring webpacker given what you have installed so far:

// config/webpack/environment.js

const webpack = require('webpack');

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

environment.plugins.append(
  'ProvidePlugin-IntroJS', // arbitrary name
   new webpack.ProvidePlugin({
     introJs: ['intro.js', 'introJs']
   }),
);

module.exports = environment;

You'll need to restart your dev server when making changes to the webpack config. I would expect you will still need to import 'intro.js' somewhere in your dependency graph.

[dbpqdb]

Perfect, thanks. That didn't work until I upgraded my webpacker gem to the latest and re-ran rails webpacker:install:vue. Once that was done, I didn't need to import intro.js anywhere, that config seems to make it globally available.

[rossta]

@dbpqdb So can this issue be closed then?

[gauravtiwari]

Thanks @rossta

@dbpqdb Yep, it should be globally available.