react-snap is failing when building

Question

I've created an app using create-react-app and everything was working fine, including the build. I've followed the steps to implement react-snap (installed using npm, modified index.js, and added the postbuild in package.json). When I build now, I get the following error:

> [email protected] postbuild
> react-snap

node:internal/modules/cjs/loader:361
      throw err;
      ^

Error: Cannot find module 'D:\project\node_modules\minimalcss\node_modules\csso\node_modules\css-tree\lib\index'. Please verify that the package.json has a valid "main" entry
    at tryPackage (node:internal/modules/cjs/loader:353:19)
    at Function.Module._findPath (node:internal/modules/cjs/loader:566:18)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (D:\project\node_modules\minimalcss\node_modules\csso\lib\index.js:1:15)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32) {
  code: 'MODULE_NOT_FOUND',
  path: 'D:\\project\\node_modules\\minimalcss\\node_modules\\csso\\node_modules\\css-tree\\package.json',
  requestPath: 'css-tree'
}

When I remove the line "postbuild": "react-snap" in package.json, I get no build error anymore.

It could be that I'm missing something, but I have no clue and couldn't find something similar online.

Any ideas how I can make it work?

Answer 1

If you created your React app somewhat recently, you probably got it with React 18, which was released less than a month ago. The release includes changes to the render function, as described in the upgrade guide. Seems react-snap was last updated 3 years ago*, so it's probably not compatible with the new changes. You Could try downgrading to React 17:

npm install [email protected] [email protected]

and then do the inverse of the changes suggested by the upgrade guide. Then you would have to hope that react-snap is updated to support React 18 some time in the future.

*) The original repo hasn't had any commits in 3 years, but there are some new pull requests. There is also at least one fork with newer commits, but I don't know if that's an "official" one.

Answer 2

I've got the same problem. Until react-snap or one of the forks does the work to make it compatible with react 18 you either need to:

• give up on pre-rendering
• find an alternative pre-rendering library compatible with react 18
• downgrade to react 17

As for alternatives, I tried https://github.com/chrisvfritz/prerender-spa-plugin but had no luck getting it going with a CRA app (using craco to hook into webpack config). I just got stuck with an error saying it fails to render all routes. It might be solvable i just didnt have the time and it felt gross.

As for forks of react-snap, thought i'd mention this is the best one i've found so far https://www.npmjs.com/package/react-snap-nh. It extends the configuration options so you can do things like list the specific routes to render rather than rendering them all. I found it very helpful.

That being said, I opted for ditching prerendering entirely for now until one of these tools becomes compatible with react 18. I had tried out downgrading to react 17 for awhile but I kept finding myself fighting little changes in the render flow that caused bugs since I had written my app up to that point with react 18 so the quirks were sort of baked in so to speak. Things like Provider's exports initialising as undefined etc.

https://www.npmjs.com/package/react-snap-nh