Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • C create-react-app
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 1,547
    • Issues 1,547
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 417
    • Merge requests 417
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Meta
  • create-react-app
  • Issues
  • #5809
Closed
Open
Issue created Nov 15, 2018 by Administrator@rootContributor

Development page blank on first load

Created by: 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

Assignee
Assign to
Time tracking