.css Module parse failed

Question

Installed Rodal modals for React but when i add

import 'rodal/lib/rodal.css';

i get an error -> "ERROR in ./~/rodal/lib/rodal.css Module parse failed"

Looking around it appears to be a babel.config.js issues but even when copying some of other peoples answers, the problem persists. Below is the babel.config.js file

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
  loaders: [
    { test: /\.js$/, exclude: /node_modules/, loaders: 'babel', query: { presets: ['react', 'es2015', 'stage-1'] } },
    { test: /\.css$/, loader: "style-loader!css-loader" }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

Add package.json

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "repository": "",
  "scripts": {
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
    "test:watch": "npm run test -- --watch"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "chai": "^3.5.0",
    "chai-jquery": "^2.0.0",
    "css-loader": "^0.26.2",
    "jquery": "^2.2.1",
    "jsdom": "^8.1.0",
    "mocha": "^2.4.5",
    "npm": "^4.3.0",
    "react-addons-test-utils": "^0.14.7",
    "style-loader": "^0.13.2",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "axios": "^0.15.3",
    "babel-preset-stage-1": "^6.1.18",
    "classnames": "^2.2.5",
    "flexboxgrid": "^6.3.1",
    "lodash": "^3.10.1",
    "material-design-icons": "^3.0.1",
    "material-ui": "^0.17.0",
    "next": "^2.0.0-beta",
    "react": "^15.4.2",
    "react-carousel": "^3.3.0",
    "react-dom": "^15.4.2",
    "react-flexbox-grid": "^0.10.2",
    "react-instantsearch": "^3.2.1",
    "react-instantsearch-theme-algolia": "^3.2.1",
    "react-redux": "^4.0.0",
    "react-router": "^3.0.2",
    "react-slick": "https://github.com/johntron/react-slick/archive/0.14.6-patch.tar.gz",
    "react-tap-event-plugin": "^2.0.1",
    "redux": "^3.0.4",
    "redux-promise": "^0.5.3",
    "rodal": "^1.4.0"
  }
}

The component calling it is

import React, { Component } from 'react';
import Rodal from 'rodal';
import 'rodal/lib/rodal.css';

export default class ModalButton extends Component {
  render () {
    return (
      <div>
        <h2>Hello</h2>
      </div>
    );
  }
}

EDIT: Working Version for anyone else who needs this.

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015', 'stage-1']
        }
      },
      { test: /\.css$/, loader: "style-loader!css-loader" }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.css']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

You need to make sure you have a CSS loader in your webpack config file. Babel doesn't do anything with CSS, it just processes JS. — Aron
– Aron, Commented Mar 1, 2017 at 11:37

Deividas · Accepted Answer · 2017-03-01 14:14:06Z

13

Your error means that webpack does not know how to parse css files.

To resolve this problem you need to npm install --save-dev style-loader css-loader and in your webpack file include those loaders as follows

module: {
  loaders: [
    { test: /\.js$/, exclude: /node_modules/, loaders: 'babel', query: { presets: ['react', 'es2015', 'stage-1'] } },
    { test: /\.css$/, loader: "style-loader!css-loader" }
  ]
}

and include .css extension

resolve: {
  extensions: ['', '.js', '.jsx', '.css']
}

edited Mar 1, 2017 at 14:14

answered Mar 1, 2017 at 11:45

Deividas

6,5172 gold badges30 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Nicholas Ritson Over a year ago

i have updated the original post code for babel with css but still same error

Deividas Over a year ago

@NicholasRitson You have included the loader incorrectly. I have updated my answer with full loaders array.

Nicholas Ritson Over a year ago

thanks for that, updated it again but same error still

Deividas Over a year ago

@NicholasRitson Just for confirmation - have you restarted the dev server? If yes, can you please add more information about the error?

Nicholas Ritson Over a year ago

restarted now but with those changes it actually wont even start : ailed at the [email protected] start script 'node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js'.

|

Collectives™ on Stack Overflow

.css Module parse failed

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related