Webpack: node_modules/css/index.js didn't return a function

Question

I'm trying out webpack for the first time and used this tutorial to get started and include react.js.

After finishing the steps and installing the style and css module I keep getting an error that the css module didn't return a function.

This is my index.jsx:

/** @jsx React.DOM */

'use strict';

require('../css/normalize.css');

var React = require('react');
var Hello = require('./Test/Hello');

React.render(<Hello />, document.getElementById('content'));

And my webpack config file:

module.exports = {
    entry: './ui/src/index.jsx',
    output: {
        path: __dirname + '/build-ui',
        filename: 'app.js', //this is the default name, so you can skip it
        //at this directory our bundle file will be available
        //make sure port 8090 is used when launching webpack-dev-server
        publicPath: 'http://localhost:8090/assets'
    },
    module: {
        loaders: [
            {
                //tell webpack to use jsx-loader for all *.jsx files
                test: /\.jsx$/,
                loader: 'jsx-loader?insertPragma=React.DOM&harmony'
            },
            {
                test: /\.css$/,
                loader: "style!css"
            },
            {
                test: /\.scss$/,
                loader: "style!css!sass"
            }
        ]
    },
    externals: {
        //don't bundle the 'react' npm package with our bundle.js
        //but get it from a global 'React' variable
        'react': 'React'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    }
};

When webpack tries to bundle the project it always states the following error:

ERROR in Loader /Users/Johannes/Documents/Development/holmes/node_modules/css/index.js didn't return a function
 @ ./ui/src/index.jsx 5:0-31

I don't know what to do about that. Has anyone encountered that issue? And how can I solve it?

EDIT: My directory looks as follows:

holmes/
  ui/
    css/
      normalize.css
    src/
      Test/
        Hello.jsx
      index.jsx
    index.html
  package.json
  webpack.config.js

Answer 1

This error is caused by a css module inside node_modules. Since you've specified the css-loader in your config, webpack tries to lookup that loader inside node_modules and finds another module called css which doesn't look like a loader (hence the error message).

To avoid confusion you should simply add the -loader postfix to each loader. Omitting the -loader postfix is just a convenience feature by webpack, but unfortunately it's the culprit of that error in your case.

    loaders: [
        {
            //tell webpack to use jsx-loader for all *.jsx files
            test: /\.jsx$/,
            loader: 'jsx-loader?insertPragma=React.DOM&harmony'
        },
        {
            test: /\.css$/,
            loader: "style-loader!css-loader"
        },
        {
            test: /\.scss$/,
            loader: "style-loader!css-loader!sass-loader"
        }

Update: Starting with webpack 2, you can't omit the -loader postfix anymore. We decided to do this to prevent errors like this.

Answer 2

I had a similar issue with react-flexbox-grid. In my case, the solution was installing css-loader and style-loader npm modules:

npm install css-loader style-loader --save-dev