Error message compiled into the resulting HTML even though everything is OK

[varl]

Hi 👋

When I build (docusarus build) an error message is compiled into the index.html file, so it always shows on the site even if everything is working.

The issue can be seen live by visiting this PR preview: https://pr-994--dhis2-ui.netlify.app/

A screenshot looks like this:

In the compiled index.html, the full message can be seen:

<div style="text-align:center;color:#fff;background-color:#fa383e;border-color:#fa383e;border-style:solid;border-radius:0.25remborder-width:1px;box-sizing:border-box;display:block;padding:1rem;flex:0 0 50%;margin-left:25%;margin-right:25%;margin-top:5rem;max-width:50%;width:100%" >
    <p>Cannot find module &#x27;./assets/js/1be78505.9f0bad5c.js&#x27;
        Require stack:
        - main
    </p>
    <div>
        <button type="button">Retry</button>
    </div>
</div>

When loading the page, the actual script loads fine:

Which isn't surprising, because everything functions as intended.

There are no build errors, and the page itself works perfectly.

The only difference between development and production is that the error message is compiled into the index.html file.

Any clues why the docusaurus build command builds in the error message into the resulting index.html file?

The setup can be explored on this branch for now: https://github.com/dhis2/ui/tree/merge-design-system-stacked/docs

[Josh-Cena]

Do you have a repro, like your public code repo?

[varl]

Thank you for the quick reply. The issue can be seen on this PR preview: https://pr-994--dhis2-ui.netlify.app/

The Docusaurus setup can be explored on the merge-design-system-stacked branch: https://github.com/dhis2/ui/tree/merge-design-system-stacked/docs.

There is a PR for it but it's absolutely massive so I don't recommend delving into it.

I tried to make a simpler reproduction branch, but I haven't been able to do so. We use Docusaurus for documentation in other repositories without running into this situation.

I'll update my initial post with the PR preview link.

[slorber]

that's the first time I see this kind of error

It looks like a React-Loadable SSR error triggering the rendering of packages/docusaurus/src/client/theme-fallback/Loading/index.tsx

The red banner that remains seems triggered by a later React hydration mismatch so it should disappear if the main SSR issue gets fixed

I can't tell exactly what is happening here, your setup is not usual particularly the part about sharing Webpack config between Storybook/Docusaurus etc

I suggest removing all those things progressively until you end-up to a minimalistic Docusaurus site and the error disappears, and report us the last step that fixed it: this way we'll know if it's possible to help you

[slorber]

Also worth giving it a try: adding a homepage

[varl]

I can't tell exactly what is happening here, your setup is not usual particularly the part about sharing Webpack config between Storybook/Docusaurus etc

Yes, we are ways away from the beaten path which makes me hesitant to even ask for directions. Thanks for your suggestion, we'll give them a go !