Code splitting doesn't work in production (because only main chunk gets copied to meteor folder) #138
Description
The following works fine in dev mode, but does not work in prod mode.
I'm using react-router with getComponent to dynamically load a component when the route changes using the following code:
<Provider store={store}>
<Router history={history}>
<Route path="/" component={AppContainer}>
<Route path="test" getComponent={(loc, cb) => {
require.ensure([], require => {
cb(null, require('TestComponent'));
});
}}
/>
</Route>
</Router>
</Provider>
Webpack successfully compiles my TestComponent as a separate chunk, usually 0.client.bundle.js or 1.client.bundle.js. When I try to browse to the test path (/test) I get the following error in my browser console:
Uncaught SyntaxError: Unexpected token < 1.client.bundle.js
I guess Webpack is telling the browser to load this chunk on demand. The problem is that Meteor does not serve this chunk as JS but as an HTML page. This is the HTML it serves:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/05bff44090d5f70f8d97870a9b747d3274af0c50.css?meteor_css_resource=true"> <link rel="stylesheet" type="text/css" class="__meteor-css__" href="/28408ed221754045c692118700b61a38695f33ca.css?meteor_css_resource=true">
<script type="text/javascript">__meteor_runtime_config__ = JSON.parse(decodeURIComponent("%7B%22meteorRelease%22%3A%22METEOR%401.2.1%22%2C%22PUBLIC_SETTINGS%22%3A%7B%22env%22%3A%22PROD%22%2C%22foo%22%3A%22bar%22%7D%2C%22ROOT_URL%22%3A%22http%3A%2F%2Flocalhost%3A3000%2F%22%2C%22ROOT_URL_PATH_PREFIX%22%3A%22%22%2C%22appId%22%3A%22sqjge32snhctxiwoe%22%2C%22autoupdateVersion%22%3A%220bba65b19bdec09864f836dd696caefa33ead55e%22%2C%22autoupdateVersionRefreshable%22%3A%22468d1a60ad6b5a9f8b370283a6bfc8ca9c3fe376%22%2C%22autoupdateVersionCordova%22%3A%22none%22%7D"));</script>
<script type="text/javascript" src="/a25388218b6661007b61be8836458c55ccf2d96a.js?meteor_js_resource=true"></script>
<title>THR2</title>
</head>
<body>
<div id="dialog" class="ui inverted bottom sidebar"></div>
<div id="root" class="pusher">
<header>
<h1>Loading...</h1>
</header>
</div>
<div id="modals" class="ui dimmer modals">
</div>
</body>
</html>
So Meteor is taking over and wrapping my request for the chunk in it's own Meteor page. The chunk code is actually in the /a25388218b6661007b61be8836458c55ccf2d96a.js?meteor_js_resource=true file.
Is there a way to get Webpack to ask for the correct file or for Meteor to serve up the chunk correctly?