0.15 with vue-introjs

Sweetyy

Hi everyone,

In the last version of Quasar (0.14) I was using the package vue-introjs and it was working perfectly.

In the version 0.15.4 i don’t find where i can set this to make it work :

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

Any idea ? Thanks in advance guys !

jeffatpf

In quasar.conf.js

extendWebpack(cfg) {
cfg.module.rules.push({
enforce: ‘pre’,
test: /.(js|vue)$/,
loader: ‘eslint-loader’,
exclude: /(node_modules|quasar)/
});
cfg.plugins.push(
new webpack.ProvidePlugin(introJs: [‘intro.js’, ‘introJs’])
)
}

Sweetyy

I implemented it like that :

    build: {
      scopeHoisting: true,
      vueRouterMode: 'history',
      // gzip: true,
      // analyze: true,
      // extractCSS: false,
      // useNotifier: false,
      extendWebpack (cfg) {
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules|quasar)/
        }),
        cfg.plugins.push(
          new webpack.ProvidePlugin({introJs: ['intro.js', 'introJs']})
        )
      }
    }

But then i get some errors when I run quasar dev:

 app:dev Running: Mode [ SPA ] with [ MAT ] theme +0ms

 app:quasar-conf Reading quasar.conf.js +19s
 app:dev Checking listening address availability (0.0.0.0:8080)... +14ms
 app:quasar-conf Generating Webpack config +5ms
 app:quasar-conf Extending Webpack config +598ms
  Error: ReferenceError: webpack is not defined

    - quasar.conf.js:41 Object.extendWebpack
      M:/qwesta_last/quasar.conf.js:41:15

    - quasar-config.js:384 QuasarConfig.compile
      [qwesta_last]/[quasar-cli]/lib/quasar-config.js:384:17

    - quasar-dev:153 goLive
      [qwesta_last]/[quasar-cli]/bin/quasar-dev:153:16


    - next_tick.js:188 process._tickCallback
      internal/process/next_tick.js:188:7

    - bootstrap_node.js:187 startup
      bootstrap_node.js:187:16

    - bootstrap_node.js:608
      bootstrap_node.js:608:3

Max

With v15 you could use a plugin. Check axios.js in Plugins Directory as an example

Sweetyy

I tried with a plugin doing that :

import VueIntro from 'vue-introjs'
export default ({ app, router, Vue }) => {
  Vue.use(VueIntro)
}

But as it’s mentionned in the doc of the package :
‘then add into the plugins sections of build/webpack.dev.conf.js and build/webpack.prod.conf.js the new webpack.ProvidePlugin({ section from above.’ wich is :

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

So where can I set this ?

Sujan Dev

@Sweetyy have you found any solution. i am facing the same error when i tried to add jquery.

cfg.module.rules.push({
enforce: ‘pre’,
test: /.(js|vue)$/,
loader: ‘eslint-loader’,
exclude: /(node_modules|quasar)/
});

cfg.plugins.push(
new webpack.ProvidePlugin({
$: “jquery”,
jQuery: “jquery”
})
)

Sweetyy

@Sujan-Dev no i didn’t find any solution for that… I tried a lot of things but still not working.

Waiting for our hero who will save us !

Sujan Dev

@benoitranque @rstoenescu your attention please .

a47ae

Please try

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

or at the top of your file write const webpack = require('webpack')

Hopefully this should resolve the issue.

Sujan Dev

thanks @a47ae at last you solved my problem .

Sweetyy

Thank you @a47ae it finally works !

a47ae

Glad to hear your errors got resolved!

No More Posting New Topics!

0.15 with vue-introjs