Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin('html').use(<Plugin>) first.

[paxcodes]

Describe the bug
After following instructions in README.md, running npm run build gives error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin('html').use(<Plugin>) first.

To Reproduce
Steps to reproduce the behavior:

1. vue add prerender-spa
2. Enter default answers
3. Run npm run build
4. See error

Expected behavior
Project builds succesfully 🎉

Screenshots

-> % vue add prerender-spa

📦  Installing vue-cli-plugin-prerender-spa...


added 20 packages, removed 1 package, and audited 1376 packages in 46s

73 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
✔  Successfully installed plugin: vue-cli-plugin-prerender-spa

? Which routes to pre-render? (separate with comma) (only with Vue Router history mode) /
? Use a render event to trigger the snapshot? Yes
? Use a headless browser to render the application? (recommended) Yes
? Only use prerendering for production builds? (recommended) Yes

🚀  Invoking generator for vue-cli-plugin-prerender-spa...
📦  Installing additional dependencies...


up to date, audited 1376 packages in 2s

73 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-prerender-spa
user@iMac [11:45:57] [~/path/portfolio] [master *]
-> % npm run build

> [email protected] build
> vue-cli-service build


✔  Building for production...
 ERROR  Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin('html').use(<Plugin>) first.
Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin('html').use(<Plugin>) first.
    at Object.tap (/path/portfolio/node_modules/webpack-chain/src/Plugin.js:26:15)
    at /path/portfolio/node_modules/vue-cli-plugin-prerender-spa/index.js:55:29
    at /path/portfolio/node_modules/@vue/cli-service/lib/Service.js:236:40
    at Array.forEach (<anonymous>)
    at Service.resolveChainableWebpackConfig (/path/portfolio/node_modules/@vue/cli-service/lib/Service.js:236:26)
    at PluginAPI.resolveChainableWebpackConfig (/path/portfolio/node_modules/@vue/cli-service/lib/PluginAPI.js:145:25)
    at module.exports (/path/portfolio/node_modules/@vue/cli-service/lib/commands/build/resolveAppConfig.js:9:22)
    at build (/path/portfolio/node_modules/@vue/cli-service/lib/commands/build/index.js:147:50)
    at /path/portfolio/node_modules/@vue/cli-service/lib/commands/build/index.js:89:13
    at Service.run (/path/portfolio/node_modules/@vue/cli-service/lib/Service.js:230:12)
    at Object.<anonymous> (/path/portfolio/node_modules/@vue/cli-service/bin/vue-cli-service.js:36:9)
    at Module._compile (node:internal/modules/cjs/loader:1092:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
    at Module.load (node:internal/modules/cjs/loader:972:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12)

Additional context

Package version:

"prerender-spa-plugin": "^3.2.1",
"vue-cli-plugin-prerender-spa": "~1.1.6",

Vue version:

"vue": "^2.6.11",

Vue CLI version:

-> % vue --version
@vue/cli 4.5.11

[ricky11]

this repo needs love.. vue pre-rendering is lacking so much support.

[paxcodes]

@ricky11 I know. I'm focusing on Python right now so I can't help much with investigating the problem / contributing. :( I totally wish I have a time-turner and I would! I settled right now with not pre-rendering my hobby project which is very small.

Another workaround if you really, absolutely need pre-rendering is using Nuxt. But that could be overkill. 🙈

[ricky11]

Thanks for replying. Yes nuxt is indeed overkill. I wonder what nuxt does under the hood for pre rendering.
Im also looking at gridsome, but again i would need to make so many changes to an existing production app only to pre render 2 or 3 routes.

Nevertheless, your module works well for our home page, but for my blog it doesn't even though i have added that route. I am using a cms (prismic) to fetch the data, and i assumed that headless chrome would render the page wait for the data to fetch and then save the blog page staticly.. but it seems like it doesn't.. maybe its a timeout issue?

its sad to see the vue core team dont support pre-rendering, as even Chris Fritz has mostly left the team and given up maintaining his package. It almost seems vue is forcing us to use nuxt, but most of it isn't needed if we maintain our own routes and dont need SSR.

Thanks so much however for this package, if you have the time, please let me know if there are other options, (react-snap?)

oh by the way if in future i decide to uninstall the package and revert the changes made to vue.config.js and my main.js how would i do that? i tried to do it some time ago and my package broke..

Thanks
Rishi

[paxcodes]

I'm not a maintainer or contributor of this package. I am a fellow user who would also like to pre-render a few routes. Unfortunately, I can't think of other options right now, sorry. 😔 Apr 26, 2021, 09:34 by ***@***.***:

…

Thanks for replying. Yes nuxt is indeed overkill. I wonder what nuxt does under the hood for pre rendering. Im also looking at gridsome, but again i would need to make so many changes to an existing production app only to pre render 2 or 3 routes. Nevertheless, your module works well for our home page, but for my blog it doesn't even though i have added that route. I am using a cms (prismic) to fetch the data, and i assumed that headless chrome would render the page wait for the data to fetch and then save the blog page staticly.. but it seems like it doesn't.. maybe its a timeout issue? its sad to see the vue core team dont support pre-rendering, as even Chris Fritz has mostly left the team and given up maintaining his package. It almost seems vue is forcing us to use nuxt, but most of it isn't needed if we maintain our own routes and dont need SSR. Thanks so much however for this package, if you have the time, please let me know if there are other options, (react-snap?) Thanks Rishi — You are receiving this because you authored the thread. Reply to this email directly, > view it on GitHub <#187 (comment)>> , or > unsubscribe <https://github.com/notifications/unsubscribe-auth/ADIDWNXZKKATBH6DF3KGD7DTKWIZ3ANCNFSM4ZVZDFFA>> .

[ricky11]

Oh thats okay... it seems there are other people looking for a maintained pre-render package... im going to look in to react-snap which also works with vue.. now if only i could uninstall this without breaking vue cli!

[y-a-ava]

try this:

const html = require('html-webpack-plugin')
chainWebpack: config => {
config
.plugin('html')
.use(html) // when this doesnt exist it fails
.tap(args => {
return args
})