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

[jeffatpf]

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.

[benoitranque]

Use extendWebpack in quasar.conf.js

[jeffatpf]

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

[jeffatpf]

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

[leopiccionia]

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({...})]
}

?

[jeffatpf]

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

[Jason]

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

[jeffatpf]

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

[Jason]

@jeffatef

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

[n2ray]

Hello ,
I use prerender-spa-plugin as @jeffatef mentioned, it only prerender the routes when I set quasar.config.js->build->publicPath to ‘/something’, otherwise it won’t render anything when I set publicPath to ‘/’ or empty or not set anything…
Thanks for your helps

[ssuess]

This post is deleted!