Skip to content
This repository has been archived by the owner on Apr 9, 2023. It is now read-only.

[prerender-spa-plugin] Unable to prerender all routes! when upgrade webpack to v5+ #414

Open
lduoduo opened this issue Dec 9, 2020 · 10 comments

Comments

@lduoduo
Copy link

lduoduo commented Dec 9, 2020

ERROR in [prerender-spa-plugin] Unable to prerender all routes!
this happened in webpack5, but work well in webpack4

node env: v12.18.2

error messages comes out with deeply debug;
image

image
image

webpack5 breaked here because of this:

https://webpack.js.org/blog/2020-10-10-webpack-5-release/#filesystems

Filesystems
Next to compiler.inputFileSystem and compiler.outputFileSystem there is a new compiler.intermediateFileSystem for all fs actions that are not considered as input or output, like writing records, cache or profiling output.

The filesystems have now the fs interface and do no longer demand additional methods like join or mkdirp. But if they have methods like join or dirname they are used.

code update here to be compatible with both webpack4/5

  // From https://github.com/ahmadnassri/mkdirp-promise/blob/master/lib/index.js
  const mkdirp = function (dir, opts) {
    return new Promise((resolve, reject) => {
      console.log('\ndir', dir, opts, '\n');
      try {
        compilerFS.mkdirp(dir, opts, (err, made) => err === null ? resolve(made) : reject(err))
      } catch(e) {
        compilerFS.mkdir(dir, opts, (err, made) => err === null ? resolve(made) : reject(err))
      }
    })
  }
@fouronnes
Copy link

I can confirm this issue is correct, getting the same problem here. compilerFS.mkdirp is not a function in webpack 5.

marcusds added a commit to marcusds/prerender-spa-plugin that referenced this issue Jan 20, 2021
fix:compilerFS.mkdirp is not a function(chrisvfritz#414)
@dreysolano
Copy link

Nice find all. One caveat is that the above will not work for nested routes such as /pages/about-us if the /pages dir does not already exist. The solution here is to pass {recursive: true} in the opts param. This solved the issue for me:

compilerFS.mkdir(dir, {...opts, recursive: true}, (err, made) => err === null ? resolve(made) : reject(err))

@chrisvfritz - any chance that this project will be supported again soon? I'm sure a number of us in the community would be happy to lend a hand!

@dreysolano
Copy link

For anyone interested, I forked the main project and created the following package which has the fix noted above for Webpack 5, along with up-to-date dependencies. Hopefully this can be PRed back into the main project repo if/when @chrisvfritz and team start supporting again.

https://www.npmjs.com/package/@dreysolano/prerender-spa-plugin

@MuYunyun
Copy link

MuYunyun commented Feb 19, 2021

For anyone interested, I forked the main project and created the following package which has the fix noted above for Webpack 5, along with up-to-date dependencies. Hopefully this can be PRed back into the main project repo if/when @chrisvfritz and team start supporting again.

https://www.npmjs.com/package/@dreysolano/prerender-spa-plugin

thanks. BTW can you support a callback props after mkdirp all files? I want to do extra logic after that.

.then(r => {
+  const { successCb } = this._options
+  successCb && successCb()
   PrerendererInstance.destroy()
  done()
})

@capelski
Copy link

For anyone interested, I forked the main project and created the following package which has the fix noted above for Webpack 5, along with up-to-date dependencies. Hopefully this can be PRed back into the main project repo if/when @chrisvfritz and team start supporting again.

https://www.npmjs.com/package/@dreysolano/prerender-spa-plugin

Nice job 🚀 I've just installed it and it's working like a charm. Helpful to migrate from webpack 4 to webpack 5!

For anybody else getting here, notice that there are many other PrerenderSPAPlugin-forked packages on npm. I guess prerender-spa-plugin-next will be the one taking over this repository but, at least for me, I got errors while prerendering which didn't show up with @dreysolano/prerender-spa-plugin.

@lbreza
Copy link

lbreza commented Jul 20, 2021

Getting the same problem after update to the webpack 5.
Would like to see that fixed.

@AlexisVK
Copy link

AlexisVK commented Jul 20, 2021

Same problem. All forks doesn't have correct documentation but at the same time this repo is dead. Does anybody knows is there a working alternative for webpack 5?

@mikob
Copy link

mikob commented Feb 10, 2022

For anyone interested, I forked the main project and created the following package which has the fix noted above for Webpack 5, along with up-to-date dependencies. Hopefully this can be PRed back into the main project repo if/when @chrisvfritz and team start supporting again.
https://www.npmjs.com/package/@dreysolano/prerender-spa-plugin

Nice job rocket I've just installed it and it's working like a charm. Helpful to migrate from webpack 4 to webpack 5!

For anybody else getting here, notice that there are many other PrerenderSPAPlugin-forked packages on npm. I guess prerender-spa-plugin-next will be the one taking over this repository but, at least for me, I got errors while prerendering which didn't show up with @dreysolano/prerender-spa-plugin.

I had the inverse issue where prerender-spa-plugin-next worked (albeit I had to modify the config a bit to fit a slight change config structure) while the @dreysolano plugin gave me the same error about prerending all routes.

@Tofandel
Copy link

Tofandel commented Apr 2, 2022

For anybody here, you can use https://github.com/Tofandel/prerender-spa-plugin-next until I take on maintenance here

It's a major release so there is some differences because it had to be rewritten to be in line with the webpack 5 api, there is notably no more outputDir and no more compression, because all the files are emitted as assets of the build, you should now just use https://webpack.js.org/plugins/html-minimizer-webpack-plugin/ and https://webpack.js.org/plugins/compression-webpack-plugin/ if you also want .gz files which will work perfectly

shurintou added a commit to shurintou/my_blog that referenced this issue Apr 26, 2022
1.Add prerender-spa-plugin dependency to prerender spa into html.(Because of chrisvfritz/prerender-spa-plugin#414 (comment), use forked project instead.)
2.Add react-app-rewired dependency to allow modification of the webpack configuration.
3.Add config-overrides.js to configure react-app-rewired.
4.Add concurrently dependency to run npm script "craco" and "react-app-rewired" concurrently.
@opeoyeleke
Copy link

For anyone interested, I forked the main project and created the following package which has the fix noted above for Webpack 5, along with up-to-date dependencies. Hopefully this can be PRed back into the main project repo if/when @chrisvfritz and team start supporting again.

https://www.npmjs.com/package/@dreysolano/prerender-spa-plugin

Thank you for this

ryoutoku added a commit to ryoutoku/clinic-hp that referenced this issue Jan 5, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants