Undetected chunks

[marcopeg]

Hello, thank you for this example and for the article that you shared on Medium.

I am experiencing a weird behavior that is really driving me crazy crazy crazy. I wonder if you stumbled upon something similar yourself.

if you change the PageAnother.jsx to:

import React from 'react';
import moment from 'moment';

export default () => (
    <div>This is for another page. {JSON.stringify(moment())}</div>
);

(basically adding a dependency)

the SSR will break.

Actually, the SSR itself works just fine, but it fails to detect all the chunks that the app generates and uses. This end up in a re-rendering in the client.

If you look at the requested js files with the Chrome console, and compare it with the list of chuncks that are present in the html source, you'll notice that chunk 5.xxxxx.js is missing in the original HTML source.

This is what is causing the flickering.

Do you have any idea how to fix this?

[marcopeg]

Looks like you need to hook into webpack's configuration and fix the optimization configuration:

config.optimization = {
        ...config.optimization,
        splitChunks: { chunks: 'initial' },
}

I do this using react-scripts-rewired