react-snapshot: Error when combining with react-loadable.

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>

About this issue

Original URL
State: open
Created 7 years ago
Reactions: 7
Comments: 18 (2 by maintainers)

Most upvoted comments

why do you think option 3 will be the slowest? Isn’t this the only solution where only the script needed for this page are loaded?

aheissenberger on Oct 27, 2017

I have “fix” for this https://github.com/judewang/snapshot-issue/pull/1/files

stereobooster on Oct 23, 2017

I suppose this one https://github.com/webpack/webpack/blob/b8f181f57fdc33fc8fccd99e07a3684c9fb723d6/lib/JsonpMainTemplatePlugin.js#L105

"var head = document.getElementsByTagName('head')[0];",
this.applyPluginsWaterfall("jsonp-script", "", chunk, hash),
"head.appendChild(script);",

Instead it should be something like this:

var lastScript = document.scripts[document.scripts.length - 1];
lastScript.parentNode.insertBefore(newNode, lastScript);

This needs correspondent ticket in webpack repo

stereobooster on Oct 23, 2017