Skip to content

Development page blank on first load #5809

Description

@SampsonCrowley

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

Environment

just says it's missing app name

Steps to Reproduce

It's definitely something in my project (upgraded from latest 1.x), because a brand new app works. when I first start the development servers, it has the following html:

<body>
    <div id="root"></div>

    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
    
    <script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>
    <script src="/static/js/bundle.js"></script>
    <script src="/static/js/0.chunk.js"></script>
    <script src="/static/js/main.chunk.js"></script>
</body>

The Page comes up blank and react-dev-tools (chrome extension) says this page is not using react
It's almost like the JS is never executed

But as soon as I refresh the page, the page works as expected with the following html served (notice chunk 0 is now chunk 1):

<body>
    <div id="root"></div>

    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
    
    <script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>
    <script src="/static/js/bundle.js"></script>
    <script src="/static/js/1.chunk.js"></script>
    <script src="/static/js/main.chunk.js"></script>
</body>

Expected Behavior

It should just load the right chunk the first time

Actual Behavior

It doesn't execute react on the first load

Reproducible Demo

Very confidential app. will try to bring it down to an MVP I can share. in the mean time I would love at least a direction to look in. there are absolutely zero errors in the console

Similar to #4788 and #4757

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions