In React universal application, there is problem when render client-side only components like Devtools, fetching components and webpack style require (require css) Two solution for this.
dynamic module import isomorphic500
check js is running on browser
use webpack also on serverside, or if you are using requirejs, you can map client modules to null
But serverside build look like overkill to me, I choose dynamic module import. However in es6, import doesn't support dynamic import. So you should use commonjs require for it. It seems tricky.
import React from 'react';
if (BROWSER) {
var ClientOnlyComponent = require('path/to/Client-only-component');
require(./style.scss);
}
I create ignorer.js for ignore some modules on server. before import server, index.js configure which file should be ignored. All client only components are in client/ folder and these are automatically ignored by ignorer. See index.js file.
.
├── src
│ ├── actions
│ ├── client
│ │ ├── components
│ │ └── containers
│ │ └── Client-only-component.jsx
│ ├── components
│ ├── containers
│ │ ├── App
│ │ │ └── index.jsx
│ │ └── Home.jsx
│ ├── stores
│ ├── views
│ └── server
│ ├── routers
│ └── index.js
├── ignorer.js
├── app.js
└── index.js