[SOLVED] quasar.conf.js and webpack-auto-inject-version/prerender-spa-plugin



  • Within Quasar 0.14.x I use the webpack-auto-inject-version npm module to successfully inject the app version into my app from package.json and the prerender-spa-plugin npm module to prerender the SPA home page.

    In ./build/webpack.base.conf.js I require the modules:

    let WebpackAutoInject = require(‘webpack-auto-inject-version’);
    let PrerenderSpaPlugin = require(‘prerender-spa-plugin’);

    and within the same file I add module.plugins:

    new WebpackAutoInject({
      SILENT: true,
      components: {
        AutoIncreaseVersion: false
      }
    }),
    new PrerenderSpaPlugin(
      // Absolute path to compiled SPA
      path.join(__dirname, env.targetPath),
      // List of routes to prerender
      ['/']
    )
    

    So, it’s not clear how I can hook this into the new quasar.conf.js scheme? Any help is appreciated.



  • Use extendWebpack in quasar.conf.js



  • @benoitranque

    The ‘extendWebpack’ method in my quasar.conf.js is currently:

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

    when I include webpack-auto-inject-version at the top of the quasar.conf.js file:

    let WebpackAutoInject = require(‘webpack-auto-inject-version’);

    and push an item on cfg.module.plugins:

      extendWebpack(cfg) {
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules|quasar)/
        });
        cfg.module.plugins.push(
          new WebpackAutoInject({
            SILENT: true,
            components: {
              AutoIncreaseVersion: false
            }
          })
        );
      }
    },
    

    I get errors that are not all that helpful:

    - quasar-config.js:384   QuasarConfig.compile
      [pf-web]/[quasar-cli]/lib/quasar-config.js:384:17
    
    - quasar-config.js:92   [0mFSWatcher.QuasarConfig.chokidar.watch.on.debounce
      [pf-web]/[quasar-cli]/lib/quasar-config.js:92:16
    
    
    - next_tick.js:188   process._tickCallback
      internal/process/next_tick.js:188:7
    

    Any help would be appreciated.



  • Any help on this would be appreciated. A move to 0.15 would be difficult without the prerender-spa-plugin.



  • Have you tried replacing

    cpg.module.plugins.push(
        new WebpackAutoInject({...})
    )
    

    with

    if (cfg.module.plugins) {
        cfg.module.plugins.push(
            new WebpackAutoInject({...})
        )
    }
    else {
        cfg.module.plugins = [new WebpackAutoInject({...})]
    }
    

    ?



  • I figured this one out after inspecting the cfg object. I needed to push the plugin onto cfg.plugins (not cfg.module.plugins).



  • @jeffatef

    Could you please describe how you exactly managed to got the “prerender-spa-plugin” working with the 0.15 version? When I try to build my app with the extendeWebpack cfg as you described I get the following error:

    ReferenceError: PrerenderSpaPlugin is not defined

    Where should I define this plugin?



  • @Jason
    (1) ‘npm install --save-dev prerender-spa-plugin’
    (2) add 'let path = require(‘path’); to the top of quasar.conf.js - the prerender plugin needs to know where the build is.
    (3) add…

    let spaPath = path.join(__dirname, ‘dist/’ + ctx.modeName + ‘-’ + ctx.themeName);
    cfg.plugins.push(
    new PrerenderSpaPlugin(spaPath, [’/’])
    );

    … to the build.extendWebpack(cfg) section of quasar.conf.js.



  • @jeffatef

    Thx! I needed to include the Path indeed. Works fine now…