babel-plugin-client-only-require

What does it do

Converts import statements for less/css/scss into conditional requires in compiled file:

src/index.js:

import ('./myStyles.less')

is converted into lib/index.js:

!!(typeof window !== 'undefined' && window.document && window.document.createElement) ? require("./styles/myStyles.less") : void 0;

Why is it needed?

If we run without this plugin:

babel-node src/index.js

or

babel src --out-dir lib
node lib/index.js

we will get an error:

...myStyles.css:2
.main {
^
SyntaxError: Unexpected token .

As node is trying to process less-css-scss file. So we do not want node on the server to process those files at all.

Why can't i use babel-plugin-transform-require-ignore

babel-plugin-transform-require-ignore will remove require statements for styles from transpiled output so your lib/index.js will have no mentioning of

require('myStyles.less')

But now, if you run your webpack to create client bundle from your lib/*, your webpack style loader and ExtractTextPlugin will not find any less-css-scss files to grab and bundle. With the appoach of wrapping require to client only condition - require is still there for webpack to act on.

How to configure

Install as dev dependency:

npm install --save-dev babel-plugin-client-only-require

To configure add plugin to .babelrc plugins section:

{
	....
    "plugins": [
		....
		["client-only-require", {
                "extensions": ["less", "scss", "css"]
        }]
    ]
}