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
в проект.