Add support for universal rendering

KyleAMathews / react-spinkit

A collection of loading indicators animated with CSS for React

http://kyleamathews.github.io/react-spinkit/

MIT License

1.49k stars 73 forks source link

Add support for universal rendering #40

Closed aight8 closed 7 years ago

aight8 commented 7 years ago

Because the server should not really rendered on server side (it's only temporary for the client normally) maybe just render "null" is quick solution.

KyleAMathews commented 7 years ago

Is there something broken right now? If not, it seems more bother than it's worth to try to not render on the server as a slight optimization.

aight8 commented 7 years ago

/APP_PATH/node_modules/react-spinkit/css/fade-in.css:1
(function (exports, require, module, __filename, __dirname) { @-webkit-keyframes fade-in {
                                                              ^
SyntaxError: Unexpected token ILLEGAL
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:528:28)
    at Module._extensions..js (module.js:565:10)
    at Object.require.extensions.(anonymous function) [as .js] (/APP_PATH/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/APP_PATH/node_modules/react-spinkit/dist/index.js:19:1)

sebfek commented 7 years ago

I dont get this exception really. The css and style loader is the only loaders. It seems to be the @ character is a special token somehow (like @import).

KyleAMathews commented 7 years ago

No it's for animations https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

If you're seeing this error then it's because you don't have your webpack config setup correctly.

KyleAMathews commented 7 years ago

sebfek commented 7 years ago

Maybe an advice to users would be nice. I find a solution for this and post it here.

lynndylanhurley commented 7 years ago

@KyleAMathews - can you post the webpack config that you're using?

hmtri1011 commented 7 years ago

I have a same problem, this is my webpack.config.js

           {
                test: /\.css$/,
                use: [
                    {
                        loader : 'style-loader'
                    },
                    {
                        loader : 'css-loader',
                        options : {
                            modules : true
                        }
                    }
                ]
            }

Is that true? how can I fix this problem I'm using css-loader : "^0.26.1" , style-loader : "^0.13.1", webpack : "^2.2.1"