我第一次尝试使用webpack并使用this tutorial开始并包含react.js。
完成步骤并安装style
和css
模块后,我不断收到css模块没有返回功能的错误。
这是我的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'));
我的webpack配置文件:
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']
}
};
当webpack尝试捆绑项目时,它总是会出现以下错误:
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
我不知道该怎么做。有没有人遇到过这个问题?我该如何解决?
编辑:我的目录如下所示:
holmes/
ui/
css/
normalize.css
src/
Test/
Hello.jsx
index.jsx
index.html
package.json
webpack.config.js
答案 0 :(得分:49)
此错误是由css
内的node_modules
模块引起的。由于您已在配置中指定了css
- 加载程序,因此webpack会尝试在node_modules
内查找该加载程序,并找到另一个名为css
的模块,该模块看起来并不像loader(因此错误消息)。
为避免混淆,您只需将-loader
后缀添加到每个加载器即可。省略-loader
后缀只是webpack的一个便利功能,但不幸的是,它是您案例中该错误的罪魁祸首。
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"
}
更新:从webpack 2开始,您不能再省略-loader
后缀。我们决定这样做是为了防止这样的错误。
答案 1 :(得分:6)
我与react-flexbox-grid
有类似的问题。就我而言,解决方案是安装css-loader
和style-loader
npm模块:
npm install css-loader style-loader --save-dev
答案 2 :(得分:0)
我也使用node-noop
遇到了类似的问题。
幸运的是,当我将null
和enzyme
添加到项目中时,使用react-addons-test-utils
作为替代工作。