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.

Error when combining with react-loadable.

See original GitHub issue

Hi, I followed guide in create-react-app and done code splitting with react-loadable. After deploying my app to server, I found an error in console said Can't find variable: webpackJsonp . I then found the problem is that react-snap will overwrite the html but inject chunks inside <head>, the chunk’s content is something like webpackJsonp(...). Since the webpackJsonp was defined inside main.js and main.js is at the bottom of <body>, that cause the problem.

Here’s the sample code produced by npm run build && npm run react-snap

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width,initial-scale=1,shrink-to-fit=no">
  <meta name="theme-color"
        content="#000000">
  <link rel="manifest"
        href="/manifest.json">
  <link rel="shortcut icon"
        href="/favicon.ico">
  <title>React App</title>
  <link href="/static/css/main.cacbacc7.css"
        rel="stylesheet">
  <style type="text/css"
         data-styled-components="kCrotB hzkseL"
         data-styled-components-is-local="true">
    /* sc-component-id: sc-bdVaJa */

    .sc-bdVaJa {}

    .kCrotB {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      height: 100vh;
      width: 100vw;
    }
    /* sc-component-id: sc-bwzfXH */

    .sc-bwzfXH {}

    .hzkseL {
      font-size: 48px;
      text-align: center;
      margin: auto;
    }

  </style>
  <script type="text/javascript"
          charset="utf-8"
          src="/static/js/0.7749783b.chunk.js"></script>
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root">
    <div class="App"
         data-reactroot=""
         data-reactid="1"
         data-react-checksum="1111271051">
      <div class="App-header"
           data-reactid="2">
        <h2 data-reactid="3">Welcome to React</h2></div>
      <ul data-reactid="4">
        <li data-reactid="5"><a class="active"
             style="text-decoration:none;"
             aria-current="true"
             href="/"
             data-reactid="6">Home</a></li>
        <li data-reactid="7"><a aria-current="false"
             href="/about"
             data-reactid="8">About</a></li>
      </ul>
      <div class="sc-bdVaJa kCrotB"
           data-reactid="9">
        <p class="sc-bwzfXH hzkseL"
           data-reactid="10">Loading...</p>
      </div>
    </div>
  </div>
  <script type="text/javascript"
          src="/static/js/main.9652c51a.js"></script>
</body>

</html>