Closed jangxyz closed 7 years ago
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') }
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'. 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:
require
function with css filenames.
Since it's not a node require, but just some inner function, node would not choke.<Spinner />
would be correctly rendered as HTML. require("cssify")(stringifiedCss);
is called.cssify
module builds the style tag with the stringifiedCss and appends to the head.<Spinner />
tag is applied with proper CSS.And voila! I can see the spinner on the browser, and React doesn't complain about anything :smiley:
Maybe this could be built into the default build process in react-spinkit. What do you think?
Ran into this as well... Any update on this?
Addressed in 3.0; can now use REACT_SPINKIT_NO_STYLES environment variable to opt out
I'm currently doing a server-side rendering as an optimization, and react-spinkit chokes when is required from node directly:
Seems like
require("react-spinkit")
loadsdist/index.js
, which requires css files. This works correctly on client because browserify transforms withcssify
, 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?