stereobooster/react-snap

Support Vite.JS

johannbuscail opened this issue · 4 comments

Feature Request

Is your feature request related to a problem? Please describe.
Cannot use the react-snap with vite.js

Describe the solution you'd like
Would be great to have an implementation of react-snap for the react plugin of vite.js

Describe alternatives you've considered
I've considered using vite-plugin-ssr prerendering option, but my project is small and using this library requires a lot of changes, refactoring and useless boilerplate. I'd like to have a simple solution for vite and I think react-snap is a perfect fit.

How resolve your problem? Did you use other library for prerendering?

I haven't had any problems using react-snap in combination with vite.js. You just need to add "postbuild": "react-snap" to your scripts object and change the source folder to dist inside your package.json:

  "reactSnap": {
    "source": "dist"
  },

React-snap not working on Vite Typescript.-

react-snap works with Vite; it's just that the included version of Puppeteer uses Chromium 78 for which your app after building may be incompatible due to unsupported ECMAScript features.

This line is incompatible with puppeteer@>=14 (since puppeteer/puppeteer@6c96011) so you can try using yarn resolutions or similar to force the installation of puppeteer@^13

  // package.json
  "resolutions": {
    "puppeteer": "^13"
  },

This will include Chromium 101 that should improve compatibility.