Skip to content

Commit cfc175e

Browse files
somussomus
committed
fix(devserver): resolve error in code splitting
1 parent c4b740d commit cfc175e

File tree

5 files changed

+55
-55
lines changed

5 files changed

+55
-55
lines changed

‎client/App.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ const history = browserHistory;
88
export default function App(props) {
99
return (
1010
<Provider store={props.store}>
11-
<Router history={history} routes={routes} />
11+
<Router history={history}>
12+
{routes}
13+
</Router>
1214
</Provider>
1315
);
1416
}

‎client/routes.js

Lines changed: 25 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,29 @@
1+
import React from 'react';
2+
import { Route, IndexRoute } from 'react-router';
13
import App from './modules/App/App';
24

3-
function errorLoading(err) {
4-
console.error('Dynamic page loading failed', err); // eslint-disable-line no-console
5-
}
6-
function loadRoute(cb) {
7-
return (module) => cb(null, module.default);
5+
if (typeof require.ensure !== 'function') {
6+
require.ensure = function requireModule(deps, callback) {
7+
callback(require);
8+
};
89
}
910

10-
// React Router with code-splitting
11-
// More Info: https://medium.com/modus-create-front-end-development/automatic-code-splitting-for-react-router-w-es6-imports-a0abdaa491e9
12-
export default {
13-
component: App,
14-
childRoutes: [
15-
{
16-
path: '/',
17-
name: 'home',
18-
getComponent(nextState, cb) {
19-
System.import('./modules/Post/pages/PostListPage/PostListPage')
20-
.then(loadRoute(cb))
21-
.catch(errorLoading);
22-
},
23-
},
24-
{
25-
path: '/post/:slug',
26-
name: 'post-detail',
27-
getComponent(nextState, cb) {
28-
System.import('./modules/Post/pages/PostDetailPage/PostDetailPage')
29-
.then(loadRoute(cb))
30-
.catch(errorLoading);
31-
},
32-
},
33-
],
34-
};
11+
export default (
12+
<Route path="/" component={App}>
13+
<IndexRoute
14+
getComponent={(nextState, cb) => {
15+
require.ensure([], require => {
16+
cb(null, require('./modules/Post/pages/PostListPage/PostListPage').default);
17+
});
18+
}}
19+
/>
20+
<Route
21+
path="/post/:slug"
22+
getComponent={(nextState, cb) => {
23+
require.ensure([], require => {
24+
cb(null, require('./modules/Post/pages/PostDetailPage/PostDetailPage').default);
25+
});
26+
}}
27+
/>
28+
</Route>
29+
);

‎index.js

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,6 @@
22
if (process.env.NODE_ENV === 'production') {
33
require('./static/dist/server.bundle.js');
44
} else {
5-
// System.import polyfill
6-
if (typeof System === 'undefined') {
7-
System = {
8-
import: function(path) {
9-
return Promise.resolve(require(path));
10-
},
11-
};
12-
}
13-
145
require('babel-register');
156
require('babel-polyfill');
167
require('css-modules-require-hook');

‎server/server.js

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,6 @@ import posts from './routes/post.routes';
3333
import dummyData from './dummyData';
3434
import serverConfig from './config';
3535

36-
// Import Manifests
37-
const assetsManifest = require('../static/dist/manifest.json'); // eslint-disable-line import/no-unresolved
38-
const chunkManifest = require('../static/dist/chunk-manifest.json'); // eslint-disable-line import/no-unresolved
39-
4036
// MongoDB Connection
4137
mongoose.connect(serverConfig.mongoURL, (error) => {
4238
if (error) {
@@ -59,6 +55,10 @@ const renderFullPage = (html, initialState) => {
5955
const cssPath = process.env.NODE_ENV === 'production' ? '/css/app.min.css' : '/css/app.css';
6056
const head = Helmet.rewind();
6157

58+
// Import Manifests
59+
const assetsManifest = process.env.NODE_ENV === 'production' ? require('../static/dist/manifest.json') : {}; // eslint-disable-line
60+
const chunkManifest = process.env.NODE_ENV === 'production' ? require('../static/dist/chunk-manifest.json') : {}; // eslint-disable-line
61+
6262
return `
6363
<!doctype html>
6464
<html>
@@ -69,20 +69,21 @@ const renderFullPage = (html, initialState) => {
6969
${head.link.toString()}
7070
${head.script.toString()}
7171
72-
<link rel="stylesheet" href=${cssPath} />
72+
<link rel="stylesheet" href='${cssPath}' />
7373
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'/>
7474
<link rel="shortcut icon" href="http://res.cloudinary.com/hashnode/image/upload/v1455629445/static_imgs/mern/mern-favicon-circle-fill.png" type="image/png" />
7575
</head>
7676
<body>
7777
<div id="root">${html}</div>
7878
<script>
7979
window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};
80-
//<![CDATA[
80+
${process.env.NODE_ENV === 'production' ?
81+
`//<![CDATA[
8182
window.webpackManifest = ${JSON.stringify(chunkManifest)};
82-
//]]>
83+
//]]>` : ''}
8384
</script>
84-
${process.env.NODE_ENV === 'production' ? `<script src='${assetsManifest['/dist/vendor.js']}'></script>` : ''}
85-
<script src="${assetsManifest['/dist/app.js']}"></script>
85+
<script src='${process.env.NODE_ENV === 'production' ? assetsManifest['/dist/vendor.js'] : '/dist/vendor.js'}'></script>
86+
<script src='${process.env.NODE_ENV === 'production' ? assetsManifest['/dist/app.js'] : '/dist/app.js'}'></script>
8687
</body>
8788
</html>
8889
`;

‎webpack.config.dev.js

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,18 @@ var webpack = require('webpack');
33
module.exports = {
44
devtool: 'cheap-module-eval-source-map',
55

6-
entry: [
7-
'webpack-hot-middleware/client',
8-
'webpack/hot/only-dev-server',
9-
'react-hot-loader/patch',
10-
'./client/index.js',
11-
],
6+
entry: {
7+
app: [
8+
'webpack-hot-middleware/client',
9+
'webpack/hot/only-dev-server',
10+
'react-hot-loader/patch',
11+
'./client/index.js',
12+
],
13+
vendor: [
14+
'react',
15+
'react-dom',
16+
],
17+
},
1218

1319
output: {
1420
path: __dirname + '/dist/',
@@ -36,6 +42,11 @@ module.exports = {
3642

3743
plugins: [
3844
new webpack.HotModuleReplacementPlugin(),
45+
new webpack.optimize.CommonsChunkPlugin({
46+
name: 'vendor',
47+
minChunks: Infinity,
48+
filename: 'vendor.js'
49+
}),
3950
new webpack.DefinePlugin({
4051
'process.env': {
4152
CLIENT: JSON.stringify(true),

0 commit comments

Comments
 (0)