CODEWITHSUNDEEP
ruby-on-railswebpackvuejs2
bdx
bdx

Reputation: 3516

Using webpack ProvidePlugin with Rails 5.1 for a Vue app

I'm trying to use the vue-introjs package in a Rails 5.1 app.

I've added the vue-introjs and intro.js packages through yarn.

I want to make this work using the Rails webpacker gem instead of using workarounds.

The vue-introjs documentation says the following is required in the webpack configuration:

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

The Rails webpack setup doesn't have a webpack.config.js file by default, but it does have environment specific files, so I tried adding that config to /config/webpack/environment.js but that had no effect.

I then tried to adapt the sample found on this github issue which seems to be attempting a similar thing to what I want, but whilst I could get the page to load without any errors, I still get the error ReferenceError: introJs is not defined whenever I try to call myApp.$intro(), which should return an instance of the introJs module.

As a temporary measure while I couldn't get that working, I've also tried just putting this at the top of my webpack pack file where the Vue app is created:

import introJs from 'intro.js'
import VueIntro from 'vue-introjs'

But that still has the same error as above, that introJs is not defined.

Can anyone point me in the right direction for how to include the introJs module so the vue wrapper package for it will work correctly?

Upvotes: 0

Views: 634

Answers (1)

rossta
rossta

Reputation: 11494

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.

Upvotes: 3

Related Questions