0.15 with vue-introjs



  • 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 !



  • 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’])
    )
    }



  • 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
    


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



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



  • @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”
    })
    )



  • @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 ! 🙂



  • @benoitranque @rstoenescu your attention please .



  • 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.



  • thanks @a47ae 🙂 at last you solved my problem .



  • Thank you @a47ae it finally works ! 😃



  • Glad to hear your errors got resolved! 🙂