Webpack: node_modules/css/index.js не вернул функцию

Я впервые пытаюсь запустить webpack и использую этот учебник, чтобы начать работу и включить response.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

Я не знаю, что с этим делать. Кто-нибудь столкнулся с этой проблемой? И как я могу его решить?

EDIT: Мой каталог выглядит следующим образом:

holmes/
  ui/
    css/
      normalize.css
    src/
      Test/
        Hello.jsx
      index.jsx
    index.html
  package.json
  webpack.config.js

Ответы

Ответ 1

Эта ошибка вызвана модулем css внутри node_modules. Поскольку вы указали 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. Мы решили сделать это, чтобы предотвратить такие ошибки.

Ответ 2

У меня была аналогичная проблема с react-flexbox-grid. В моем случае решение заключалось в установке модулей css-loader и style-loader npm:

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

Ответ 3

Я также столкнулся с аналогичной проблемой, используя node-noop.

К счастью, использование null в качестве замены работало, когда я добавил enzyme и react-addons-test-utils в проект.