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>
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 likewebpackJsonp(...). Since thewebpackJsonpwas defined insidemain.jsandmain.jsis at the bottom of<body>, that cause the problem.Here's the sample code produced by
npm run build && npm run react-snap