requiring in node raises error

[jangxyz]

I'm currently doing a server-side rendering as an optimization,
and react-spinkit chokes when is required from node directly:

SyntaxError: .../node_modules/react-spinkit/css/fade-in.css:1
(function (exports, require, module, __filename, __dirname) { @-webkit-keyfram
                                                              ^
Unexpected token ILLEGAL

Seems like require("react-spinkit") loads dist/index.js, which requires css files.
This works correctly on client because browserify transforms with cssify, but on node it just tries to read the CSS file and expects a JavaScript syntax.

What am I suppose to do? Is there a way to build the dist file with the css files already transformed in it?

[KyleAMathews]

This is no easy solution to this afaik. The only solution I know is https://github.com/petehunt/webpack-require

You can also in node look for browser globals before requireing like if (window) { require('react-spinkit') }

[jangxyz]

Digging it deeper, I did manage to render it in server.

I attempted to "build" my own version of react-spinkit with browserify, and require that as a shim for node.

browserify -t coffee-reactify --no-browser-field --bare --standalone spinkit node_modules/react-spinkit/src/index.cjsx -o libs/react-spinkit.bundle.js

• --no-browser-field option holds for not letting the modules build in 'browser mode'.
  
  The cssify module creates a style tag with the CSS and appends to the head in browser, applying the style to the global context.
  With --no-bf it just binds the stringified CSS to the module body, and leave another require(cssify)(css); to the code so when the browser loads the bundle it applies the CSS.
• --standalone and --bare is required to load it from node.

Then I require the bundle from app's code. Since now the ./libs/react-spinkit.bundle.js is actually a module stuffed with all of its dependencies, requiring css is nothing more than just calling an inner function. I could require the new bundle file in node.

I check the browser and load different type of 'react-spinkit' module.

var Spinner;
if (ui.isBrowser()) {
    Spinner = require('react-spinkit');
} else {
    Spinner = require('../libs/react-spinkit.bundle.js');
}

This is what happens:

1. When rendering SpinKit in node, it calls the require function with css filenames.
   Since it's not a node require, but just some inner function, node would not choke.
2. <Spinner /> would be correctly rendered as HTML.
   
   Upto now, there is CSS string applied. Node hasn't render the CSS anywhere else.
3. When the page is loaded by the browser, the same render method is called, requiring react-spinkit and render it once again.
4. This time, when requiring the css file, require("cssify")(stringifiedCss); is called.
5. The cssify module builds the style tag with the stringifiedCss and appends to the head.
6. Now the <Spinner /> tag is applied with proper CSS.

And voila! I can see the spinner on the browser, and React doesn't complain about anything 😃

Maybe this could be built into the default build process in react-spinkit. What do you think?

[dijs]

Ran into this as well... Any update on this?

[merrywhether]

Addressed in 3.0; can now use REACT_SPINKIT_NO_STYLES environment variable to opt out