Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

babel-plugin-client-only-require

Package Overview
Dependencies
0
Maintainers
1
Versions
2
Issues
File Explorer

Advanced tools

babel-plugin-client-only-require

Babel plugin to transpile require of certant extensions into client only conditionial require

    1.0.1latest
    GitHub

Version published
Maintainers
1
Weekly downloads
704
decreased by-2.76%

Weekly downloads

Readme

Source

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"] }] ] }

Keywords

FAQs

Last updated on 13 Feb 2017

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc