Error in mounted hook: "ReferenceError: introJs is not defined"

[jetlej]

I'm using electron-vue, which uses vue-cli + webpack.

I've added this in src/main.js:

import VueIntro from 'vue-introjs'
Vue.use(VueIntro)

then added the plugin in webpack.renderer.config.js and `webpack.main.config.js:

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

Then when I use the intro directives in a component, I get the error: Error in mounted hook: "ReferenceError: introJs is not defined"

Both intro.js and vue-introjs have been installed via NPM

Any ideas?

[alex-oleshkevich]

Did you install intro.js?

On Sat, Dec 29, 2018, 22:14 Jordan Lejuwaan <notifications@github.com wrote:

I'm using electron-vue, which used vue-cli + webpack.

I've added this in src/main.js:

import VueIntro from 'vue-introjs' Vue.use(VueIntro)

then added the plugin in webpack.renderer.config.js and `webpack.main.config.js:

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

Then when I use the intro directives in a component, I get the error: Error in mounted hook: "ReferenceError: introJs is not defined"

Any ideas?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/alex-oleshkevich/vue-introjs/issues/34, or mute the thread https://github.com/notifications/unsubscribe-auth/AAmzyPuqj3VeGL1XE9QwBAEuggzT0pvxks5u99tLgaJpZM4ZktmP .

[jetlej]

@alex-oleshkevich - Yes, both packages were installed via NPM

[kristoff2016]

Hey, did you fixed it ? thank you

[kristoff2016]

It's worked but I seen in console ReferenceError: introJs is not defined any ideas ? thank you

[slavarazum]

Have the same issue when call this.$intro().start(), did anyone resolve it?

[lspohn]

Same problem here. Didn't find a solution. Followed the installation guide 1:1 and experienced the same problem. Solution highly appreciated. I'd suggest to include intro.js in this library as it seems that many struggle with Webpack configs.

[magdenkov]

Same problem

[yunlonglee]

I using nuxt , that is how make it work

npm i vue-introjs intro.js --save

plugins/vue-introjs.ts

import Vue from 'vue'
import VueIntro from 'vue-introjs'
import 'intro.js/introjs.css'

Vue.use(VueIntro)

nuxt.config.ts

const webpack = require('webpack')

plugins: [
  { src: "~/plugins/vue-introjs", ssr: false }
]

build: {
    plugins: [
      new webpack.ProvidePlugin({
        'introJs': ['intro.js']
      })
    ]
  }

[oshell]

I had to put this into my vue.config.js because I am using vue-cli and electron .

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        'introJs': ['intro.js']
      })
    ]
  },
}