javascript Webpack：node_modules/css/index.js 没有返回一个函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29883534/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack: node_modules/css/index.js didn't return a function
提问by Johannes Klau?
I'm trying out webpack for the first time and used this tutorialto get started and include react.js.
我是第一次尝试 webpack，并使用本教程开始并包含 react.js。
After finishing the steps and installing the styleand cssmodule I keep getting an error that the css module didn't return a function.
完成这些步骤并安装styleandcss模块后，我不断收到一个错误，即 css 模块没有返回一个函数。
This is my index.jsx:
这是我的 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:
还有我的 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']
}
};
When webpack tries to bundle the project it always states the following error:
当 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
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
回答by Johannes Ewald
This error is caused by a cssmodule inside node_modules. Since you've specified the css-loader in your config, webpack tries to lookup that loader inside node_modulesand finds another module called csswhich doesn't look like a loader (hence the error message).
这个错误是由css里面的一个模块引起的node_modules。由于您css在配置中指定了-loader，webpack 会尝试在内部查找该 loadernode_modules并找到另一个css看起来不像 loader 的模块（因此出现错误消息）。
To avoid confusion you should simply add the -loaderpostfix to each loader. Omitting the -loaderpostfix is just a convenience feature by webpack, but unfortunately it's the culprit of that error in your case.
为避免混淆，您应该简单地将-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"
}
Update: Starting with webpack 2, you can't omit the -loaderpostfix anymore. We decided to do this to prevent errors like this.
更新：从 webpack 2 开始，你不能再省略-loaderpostfix。我们决定这样做是为了防止这样的错误。
回答by Guilherme Garnier
I had a similar issue with react-flexbox-grid. In my case, the solution was installing css-loaderand style-loadernpm modules:
我有一个类似的问题react-flexbox-grid。就我而言，解决方案是安装css-loader和style-loadernpm 模块：
npm install css-loader style-loader --save-dev
回答by Keysox
I also came across a similar issue using node-noop.
我也遇到了类似的问题，使用node-noop.
Fortunately, using nullas a replacement worked when I added enzymeand react-addons-test-utilsto a project.
幸运的是，null当我添加enzyme和添加react-addons-test-utils到项目时，使用作为替代工作。
