Webpack:Node_Module/css/index.js没有返回函数?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (76)

我第一次尝试使用webpack,并使用本教程开始使用并包含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
提问于
用户回答回答于

此错误是由css内部模块引起的node_modules。既然你已经css在你的配置文件中指定了-loader,webpack会尝试在里面查找这个loader,node_modules并发现另一个叫做loader的模块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后缀了。

用户回答回答于

我也有过类似的问题react-flexbox-grid。在我的例子中,解决方案是安装css-loaderstyle-loadernpm modules:

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

扫码关注云+社区

领取腾讯云代金券