Webpack：node_modules/css/index.js 没有 return 函数

Question

我是第一次尝试 webpack，使用 this tutorial 开始并包含 react.js。

完成这些步骤并安装 style 和 css 模块后，我不断收到 css 模块没有 return 功能的错误消息。

这是我的 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

Answer 1

此错误是由 node_modules 中的 css 模块引起的。由于您在配置中指定了 css-loader，webpack 会尝试在 node_modules 中查找该加载程序并找到另一个名为 css 的模块，它看起来不像加载程序（因此错误信息）。

为避免混淆，您应该简单地向每个加载程序添加 -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 后缀。我们决定这样做是为了防止出现这样的错误。

Answer 2

我遇到了与 react-flexbox-grid 类似的问题。就我而言，解决方案是安装 css-loader 和 style-loader npm 模块：

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

Answer 3

我在使用 node-noop 时也遇到了类似的问题。

幸运的是，当我将 enzyme 和 react-addons-test-utils 添加到项目中时，使用 null 作为替代品起作用了。

Webpack：node_modules/css/index.js 没有 return 函数

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

javascript

webpack