Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Development page blank on first load

See original GitHub issue

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

Issue Analytics

State:
Created 5 years ago
Reactions:5
Comments:32 (6 by maintainers)

Top GitHub Comments

19reactions

gbirchmeiercommented, Apr 3, 2019

This is my dumb workaround, in case it’s helpful to anyone.

I simply prepended sleep 2 && to the “start-js” script.

  "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "sleep 2 && react-scripts start",  <--- RIGHT HERE
    "start": "npm-run-all -p watch-css start-js",

10reactions

Kamahl19commented, Nov 23, 2018

I actually have the very same problem also in confidential project. Did anyone discovered what is causing the issue?