Javascript is not loaded in Gatsby@5 in production build

[oskarkivra]

Hi,

I've recently upgraded our Gatsby site to Gatsby@5. Everything appears to work perfectly in development mode (gatsby develop), but when I build the static files (gatsby build) and serve them using a file server, the JavaScript code doesn't function correctly on the client side.

After about 20 seconds, I encounter an error in the console:

Uncaught (in promise) ChunkLoadError: Loading chunk 351 failed.
(timeout: http://localhost:8000/commons-5c861ea7977ae6c742e2.js)

I understand that this issue may be challenging to debug with the provided information, but is there something obvious that I might have missed?"

[oskarkivra]

And by the way, I can access the file: http://localhost:8000/commons-5c861ea7977ae6c742e2.js and it works if I downgrade to gatsby@4.

[sebastianpalmgrebban]

Having the same issue.

In gatsby-ssr.tsx:

const extractor = isProduction
    ? new ChunkExtractor({ statsFile: path.resolve('./public/loadable-stats.json'), entrypoints: [] })
    : undefined;

export const wrapRootElement = extractor
    ? (props: any) =>
          extractor.collectChunks(createElement(RootElementWrapper, props.element, props.element.props.children))
    : RootElementWrapper;

export const wrapPageElement = PageElementWrapper;

gatsby-browser.tsx

export const replaceHydrateFunction = () => (element: any, container: any) => {
    const isProduction = process.env.NODE_ENV === 'production';
    const isEmptyBody = !document?.getElementById?.(`gatsby-focus-wrapper`)?.children?.length;
    
    // Client only pages have any empty body so we just do a normal render to avoid React complaining about hydration mis-matches.
    (isProduction && !isEmptyBody) ? hydrateRoot(container, element) : createRoot(container)?.render?.(element);
};

[cavemon]

@oskarkivra having the exact same issue. Were you able to figure out a fix for this?

[Konigj]

I have found the solution. For my project, it was failing because the user's browser was not parsing the JS, as the chunk contained new syntax.
So, I had to update the Babel configuration in my babel.config.json file with the following syntax:

{...
 "presets": [
    [
      "babel-preset-gatsby",
      {
        "targets": {
          "browsers": [">0.25%", "not dead"] 
        }
      }
    ]
...}

Hope it helps!