Invalid or unexpected token @-webkit-keyframes sk-fade-in

[hmtri1011]

I have this error when trying to use:

(function (exports, require, module, __filename, __dirname) { @-webkit-keyframes sk-fade-in {
                                                              ^
SyntaxError: Invalid or unexpected token
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Module._extensions..js (module.js:579:10)
    at Object.require.extensions.(anonymous function) [as .js] (/media/hmtri/Soft  - Entertainment/Storage/Dropbox/Dropb
ox/Study/Grade4/LTHD/PDFFiller/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/media/hmtri/Soft  - Entertainment/Storage/Dropbox/Dropbox/Study/Grade4/LTHD/PDFFiller/node_m
odules/react-spinkit/dist/index.js:19:1)
    at Module._compile (module.js:570:32)
    at Module._extensions..js (module.js:579:10)
    at Object.require.extensions.(anonymous function) [as .js] (/media/hmtri/Soft  - Entertainment/Storage/Dropbox/Dropb
ox/Study/Grade4/LTHD/PDFFiller/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)

This is my webpack config:

const webpack = require('webpack');
const path = require('path');

module.exports = {
    context: path.resolve(__dirname, 'src'),

    entry: {
        app: './app-client.js'
    },

    output: {
        path: path.join(__dirname, 'src', 'public', 'assets', 'js'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: path.join(__dirname, 'src'),
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: 'babel_cache',
                            presets: ['react', 'es2015', 'stage-0']
                        }
                    }
                ],
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader : 'style-loader'
                    },
                    {
                        loader : 'css-loader',
                        options : {
                            modules : true
                        }
                    }
                ]
            }
        ]
    },

    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: { warnings: true },
            mangle: true,
            sourceMap: true,
            beautify: false,
            dead_code: true
        })
    ]
};

I'm using "webpack": "^2.2.1", "css-loader": "^0.26.1", "style-loader": "^0.13.1"

[luiseduardobrito]

Same problem here, but with Meteor 1.4.3.1.

[hmtri1011]

Hello :(, any supporter here :(

[crdil]

When I build on linux it works great, however on Windows I get the same error.

@-webkit-keyframes sk-fade-in {
                                                              ^
SyntaxError: Invalid or unexpected token

Webpack config

loaders: [
            'style-loader',
            {
              path: 'css-loader',
              // Include sourcemaps for dev experience++.
              query: { sourceMap: true },
            },
            { path: 'postcss-loader' },
            {
              path: 'sass-loader',
              options: {
                outputStyle: 'expanded',
                sourceMap: true,
              },
            },
          ]

[kuongknight]

I fount same error :)

[mojo5000]

Also getting error. Did anyone find a resolution?

[KyleAMathews]

It just means you haven't setup your project (with webpack/browserify) to handle importing css files.

[luiseduardobrito]

After almost 8 hours trying to make this work with Meteor, I gave up and now I'm using better-react-spinkit. It's not easy to tweak the webpack configurations inside Meteor platform, so this may be useful for someone in my position.

For custom Webpack environments, had no troubles.

[merrywhether]

There are options for this in 3.0, using the REACT_SPINKIT_NO_STYLES environment variable

[cryptiklemur]

that env variable isnt available in the dist, which provides no help in webpack environments