Sunday, May 12, 2024
 Popular · Latest · Hot · Upcoming
16
rated 0 times [  18] [ 2]  / answers: 1 / hits: 18065  / 9 Years ago, sun, april 26, 2015, 12:00:00

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

More From » webpack

 Answers
10

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.


[#66883] Friday, April 24, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
faithemilys

Total Points: 418
Total Questions: 100
Total Answers: 114

Location: North Korea
Member since Fri, Nov 4, 2022
2 Years ago
faithemilys questions
Wed, Mar 31, 21, 00:00, 3 Years ago
Thu, Oct 15, 20, 00:00, 4 Years ago
Tue, Sep 22, 20, 00:00, 4 Years ago
Sun, Feb 9, 20, 00:00, 4 Years ago
Fri, Dec 6, 19, 00:00, 5 Years ago
;