search

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

Unexpected character '@' #41

Closed rdavidwu closed 7 years ago

rdavidwu commented 7 years ago

Using webpack, imported spinkit and had this error

./~/react-spinkit/css/fade-in.css
[0] Module parse failed: /Users/guest/workspace/demo-v1/react/node_modules/react-spinkit/css/fade-in.css `Unexpected character '@'` (1:0)
[0] You may need an appropriate loader to handle this file type.
[0] SyntaxError: Unexpected character '@' (1:0)
[0]     at Parser.pp$4.raise (/Users/guest/workspace/demo-v1/react/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
[0]     at Parser.pp$7.getTokenFromCode (/Users/guest/workspace/demo-v1/react/node_modules/webpack/node_modules/acorn/dist/acorn.js:2756:10)
[0]     at Parser.pp$7.readToken (/Users/guest/workspace/demo-v1/react/node_modules/webpack/node_modules/acorn/dist/acorn.js:2477:17)
[0]     at Parser.pp$7.nextToken (/Users/guest/workspace/demo-v1/react/node_modules/webpack/node_modules/acorn/dist/acorn.js:2468:15)
[0]     at Parser.parse (/Users/guest/workspace/demo-v1/react/node_modules/webpack/node_modules/acorn/dist/acorn.js:515:10)
[0]     at Object.parse (/Users/guest/workspace/demo-v1/react/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
[0]     at Parser.parse (/Users/guest/workspace/demo-v1/react/node_modules/webpack/lib/Parser.js:902:15)
[0]     at DependenciesBlock.<anonymous> (/Users/guest/workspace/demo-v1/react/node_modules/webpack/lib/NormalModule.js:104:16)
[0]     at DependenciesBlock.onModuleBuild (/Users/guest/workspace/demo-v1/react/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
[0]     at nextLoader (/Users/guest/workspace/demo-v1/react/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
[0]  @ ./~/react-spinkit/dist/index.js 19:0-29

I do have css-loader "^0.23.1" and style-loader "^0.13.1" . Any idea of what it could be?

KyleAMathews commented 7 years ago

It's almost certainly a problem with your Webpack config.

rdavidwu commented 7 years ago

Yea I was missing the webpack module config for css:

module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader'} ] }

Thanks.

jimitpatel commented 6 years ago

This is how my webpack.config.js looks like

const path = require('path')

module.exports = {
  mode: 'none',
  entry: './www/js/index.js',
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader']
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: '[name].[ext]?[hash]',
              outputPath: 'images/'
            }
          }
        ]
      }
    ]
  },
  output: {
    path: path.resolve(__dirname, 'www/build'),
    filename: 'bundle.js',
    publicPath: './build/'
  }
}

And this is the error output on my console:

ERROR in ./node_modules/loaders.css/loaders.css
Module parse failed: Unexpected character '@' (14:0)
You may need an appropriate loader to handle this file type.
|  * Dots
|  */
| @-webkit-keyframes scale {
|   0% {
|     -webkit-transform: scale(1);
 @ ./node_modules/react-spinkit/dist/index.js 40:2-24
 @ ./www/js/components/Settings/SettingList.js
 @ ./www/js/containers/Settings/MainSettings.js
 @ ./www/js/containers/App.js
 @ ./www/js/index.js

ERROR in ./node_modules/react-spinkit/css/fade-in.css
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @-webkit-keyframes sk-fade-in {
|   0% {
|       opacity: 0;
 @ ./node_modules/react-spinkit/dist/index.js 43:2-31
 @ ./www/js/components/Settings/SettingList.js
 @ ./www/js/containers/Settings/MainSettings.js
 @ ./www/js/containers/App.js
 @ ./www/js/index.js

ERROR in ./node_modules/react-spinkit/css/loaders-css.css
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .ball-triangle-path > div,
| .ball-scale-ripple-multiple > div,
| .ball-scale-ripple > div {
 @ ./node_modules/react-spinkit/dist/index.js 42:2-35
 @ ./www/js/components/Settings/SettingList.js
 @ ./www/js/containers/Settings/MainSettings.js
 @ ./www/js/containers/App.js
 @ ./www/js/index.js

ERROR in ./node_modules/react-spinkit/css/chasing-dots.css
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .sk-chasing-dots {
|   width: 27px;
|   height: 27px;
 @ ./node_modules/react-spinkit/dist/index.js 44:2-36
 @ ./www/js/components/Settings/SettingList.js
 @ ./www/js/containers/Settings/MainSettings.js
 @ ./www/js/containers/App.js
 @ ./www/js/index.js

ERROR in ./node_modules/react-spinkit/css/circle.css
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .sk-circle {
|   width: 22px;
|   height: 22px;
 @ ./node_modules/react-spinkit/dist/index.js 45:2-30
 @ ./www/js/components/Settings/SettingList.js
 @ ./www/js/containers/Settings/MainSettings.js
 @ ./www/js/containers/App.js
 @ ./www/js/index.js

ERROR in ./node_modules/react-spinkit/css/cube-grid.css
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .sk-cube-grid {
|   width: 27px;
|   height: 27px;
 @ ./node_modules/react-spinkit/dist/index.js 46:2-33
 @ ./www/js/components/Settings/SettingList.js
 @ ./www/js/containers/Settings/MainSettings.js
 @ ./www/js/containers/App.js
 @ ./www/js/index.js

ERROR in ./node_modules/react-spinkit/css/double-bounce.css
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .sk-double-bounce {
|   width: 27px;
|   height: 27px;
 @ ./node_modules/react-spinkit/dist/index.js 47:2-37
 @ ./www/js/components/Settings/SettingList.js
 @ ./www/js/containers/Settings/MainSettings.js
 @ ./www/js/containers/App.js
 @ ./www/js/index.js

ERROR in ./node_modules/react-spinkit/css/folding-cube.css
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .sk-folding-cube {
|   width: 27px;
|   height: 27px;
 @ ./node_modules/react-spinkit/dist/index.js 48:2-36
 @ ./www/js/components/Settings/SettingList.js
 @ ./www/js/containers/Settings/MainSettings.js
 @ ./www/js/containers/App.js
 @ ./www/js/index.js

ERROR in ./node_modules/react-spinkit/css/pulse.css
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .sk-pulse > div {
|   width: 27px;
|   height: 27px;
 @ ./node_modules/react-spinkit/dist/index.js 49:2-29
 @ ./www/js/components/Settings/SettingList.js
 @ ./www/js/containers/Settings/MainSettings.js
 @ ./www/js/containers/App.js
 @ ./www/js/index.js

ERROR in ./node_modules/react-spinkit/css/rotating-plane.css
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .sk-rotating-plane > div {
|   width: 27px;
|   height: 27px;
 @ ./node_modules/react-spinkit/dist/index.js 50:2-38
 @ ./www/js/components/Settings/SettingList.js
 @ ./www/js/containers/Settings/MainSettings.js
 @ ./www/js/containers/App.js
 @ ./www/js/index.js

ERROR in ./node_modules/react-spinkit/css/base.css
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .sk-spinner {
|   color: #333;
| }
 @ ./node_modules/react-spinkit/dist/index.js 41:2-28
 @ ./www/js/components/Settings/SettingList.js
 @ ./www/js/containers/Settings/MainSettings.js
 @ ./www/js/containers/App.js
 @ ./www/js/index.js

ERROR in ./node_modules/react-spinkit/css/three-bounce.css
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .sk-three-bounce {
|   height: 18px;
| }
 @ ./node_modules/react-spinkit/dist/index.js 51:2-36
 @ ./www/js/components/Settings/SettingList.js
 @ ./www/js/containers/Settings/MainSettings.js
 @ ./www/js/containers/App.js
 @ ./www/js/index.js

ERROR in ./node_modules/react-spinkit/css/wandering-cubes.css
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .sk-wandering-cubes {
|   width: 52px;
|   height: 52px;
 @ ./node_modules/react-spinkit/dist/index.js 52:2-39
 @ ./www/js/components/Settings/SettingList.js
 @ ./www/js/containers/Settings/MainSettings.js
 @ ./www/js/containers/App.js
 @ ./www/js/index.js

ERROR in ./node_modules/react-spinkit/css/wave.css
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .sk-wave {
|   width: 30px;
|   height: 27px;
 @ ./node_modules/react-spinkit/dist/index.js 53:2-28
 @ ./www/js/components/Settings/SettingList.js
 @ ./www/js/containers/Settings/MainSettings.js
 @ ./www/js/containers/App.js
 @ ./www/js/index.js

ERROR in ./node_modules/react-spinkit/css/wordpress.css
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .sk-wordpress > div {
|   width: 27px;
|   height: 27px;
 @ ./node_modules/react-spinkit/dist/index.js 54:2-33
 @ ./www/js/components/Settings/SettingList.js
 @ ./www/js/containers/Settings/MainSettings.js
 @ ./www/js/containers/App.js
 @ ./www/js/index.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! com.myapp.demo@1.0.0 build: `webpack --config webpack.config.js --display-error-details`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the com.myapp.demo@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

And this is what I am using in one of the .js file

import Spinner from 'react-spinkit'
.
.
.
spinner() {
    return (
      <div className={ index.middle }>
        <Spinner name='ball-clip-rotate-multiple' color='orange' />
      </div>
    )
  }
.
.
.
render() {...}

Can you help me out what am I missing? I am new to Javascript world

CWolfAnderson commented 6 years ago 
{
      test: /\.css$/,    
      loaders: ['style-loader', 'css-loader'],
      include: /node_modules/
}

including node_modules solved it for me