React-snap: CRA2 compatibility

[raRaRa]

I was just trying out react-snap with my project. When I open the site I get a lot of these warnings:

The resource http://localhost:8000/static/js/5.f6bab7d8.chunk.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriateasvalue and it is preloaded intentionally.

Are chunks not properly supported, or is this something else?

Thanks!

[stereobooster]

I haven't test it with latest CRA2. I only tested it with alpha versions. So yes something can be broken

[stereobooster]

Probably connected to https://github.com/facebook/create-react-app/issues/5309

[raRaRa]

@stereobooster How will this affect react-snap, that they've started to inline chunks?

[stereobooster]

They inline first chunk and this is intentional. We need to investigate further what is broken

[stereobooster]

It seems that fix is (package.json):

"reactSnap": {
  "fixWebpackChunksIssue": false
}

Please test and tell me if it helps

Update Also, try INLINE_RUNTIME_CHUNK=false yarn build

[raRaRa]

@stereobooster Yup sure seems to help! What exactly was the "fix" meant to do, that disabling helps?

[stereobooster]

It fixes how webpack chunks are inserted in html in CRA1, it appears they fixed it in CRA2

[raRaRa]

Ah sweet! Thanks for the quick solution @stereobooster. Much appreciated!

[stereobooster]

Update: "fixWebpackChunksIssue": false fixes prerendering, but result has awful Time To First Paint, because it contains script tags in the header. CRA2 compatibility needs more work

[jasan-s]

Does CRA v2.0.5 fix the issue? i.e by adding env var REACT_APP_INLINE_RUNTIME_CHUNK=false

[stereobooster]

@jasan-s from my quick tests it seems it works

[raRaRa]

Now the big question, inline scripts vs extra requests, with react-snap.

[tzi]

If someone here is looking for the solution, the environment variable is INLINE_RUNTIME_CHUNK

# package.json
{
  "scripts": {
    "build": "INLINE_RUNTIME_CHUNK=false react-scripts build && react-snap"
  }
}

Source: https://github.com/facebook/create-react-app/blob/master/docusaurus/docs/advanced-configuration.md

[behnammodi]

Which is correct? REACT_APP_INLINE_RUNTIME_CHUNK or INLINE_RUNTIME_CHUNK

[jasan-s]

@uxitten if you define it in .env file use REACT_APP_INLINE_RUNTIME_CHUNK if you add it in the build script use INLINE_RUNTIME_CHUNK

[behnammodi]

@jasan-s thanks, but TimeoutError agian

[jasan-s]

did you also add this "fixWebpackChunksIssue": false react-snap

"reactSnap": {
  "fixWebpackChunksIssue": false
}

[behnammodi]

yes
this is my dependencies

and react-snap config

[stereobooster]

See this issue for TimeOut https://github.com/stereobooster/react-snap/issues/240

[stereobooster]

I finally got to this issue. Try this in package.json:

"react-snap": "https://github.com/stereobooster/react-snap.git#crav2",

Run npm i or yarn. Do not use "fixWebpackChunksIssue": false or INLINE_RUNTIME_CHUNK=false.

[stereobooster]

Released fix in v1.22.0

[kjkta]

This throws if you have no devDeps.

/node_modules/react-snap/run.js:15
  devDependencies["react-scripts"] || dependencies["react-scripts"]
                 ^

TypeError: Cannot read property 'react-scripts' of undefined

Fixed in https://github.com/stereobooster/react-snap/pull/312

[nandorojo]

Is anyone still experiencing this with 1.23.0? My client side app won't hydrate.

Server works fine:

Client doesn't:

// src/index.tsx
import React from "react";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

import { hydrate, render } from "react-dom";

const rootElement = document.getElementById("root");
console.log("hi!!");

if (rootElement && rootElement.hasChildNodes()) {
  hydrate(<App />, rootElement);
} else {
  console.log("[app] render");
  render(<App />, rootElement);
}
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

I'm running yarn react-scripts build && yarn react-snap.