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

[lduoduo]

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;

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]

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

[dreysolano]

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]

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]

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]

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]

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

[AlexisVK]

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]

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]

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

[opeoyeleke]

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