Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
paxcodes opened this issue Mar 23, 2021 · 6 comments

Comments

@paxcodes
Copy link

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

> paper_free_resume@0.1.0 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
Copy link

ricky11 commented Apr 26, 2021

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

@paxcodes
Copy link
Author

@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
Copy link

ricky11 commented Apr 26, 2021

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
Copy link
Author

paxcodes commented Apr 26, 2021 via email

@ricky11
Copy link

ricky11 commented Apr 26, 2021

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
Copy link

y-a-ava commented Feb 7, 2022

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
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants