Webpack: node_modules/css/index.js không trả về hàm

Question

Tôi đang thử dùng webpack lần đầu tiên và sử dụng this tutorial để bắt đầu và bao gồm react.js.

Sau khi hoàn tất các bước và cài đặt mô-đun style và css Tôi tiếp tục gặp lỗi khi mô-đun css không trả về một hàm.

Đây là index.jsx tôi:

/** @jsx React.DOM */ 

'use strict'; 

require('../css/normalize.css'); 

var React = require('react'); 
var Hello = require('./Test/Hello'); 

React.render(<Hello />, document.getElementById('content')); 

Và webpack tập tin cấu hình của tôi:

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'] 
    } 
}; 

Khi webpack cố gắng bó dự án nó luôn luôn khẳng định được lỗi sau:

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 

Tôi không biết phải làm gì về điều đó. Có ai gặp phải vấn đề đó không? Và làm thế nào tôi có thể giải quyết nó?

EDIT: thư mục My trông như sau:

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

Answer 1

Lỗi này là do một module css bên node_modules. Vì bạn đã chỉ định trình tải cấu hình css trong cấu hình của mình, webpack sẽ tìm kiếm trình tải đó bên trong node_modules và tìm một mô-đun khác được gọi là css không giống như trình tải (do đó là thông báo lỗi).

Để tránh nhầm lẫn, bạn chỉ cần thêm mã bưu chính -loader vào mỗi trình tải. Bỏ qua các postchỉ là một tính năng tiện lợi của webpack, nhưng tiếc là nó là thủ phạm của lỗi đó trong trường hợp của bạn.

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" 
     } 

Cập nhật: Bắt đầu với webpack 2, bạn không thể bỏ qua -loader postfix nữa. Chúng tôi quyết định làm điều này để ngăn chặn các lỗi như thế này.

Answer 2

Tôi gặp sự cố tương tự với react-flexbox-grid. Trong trường hợp của tôi, giải pháp đã được cài đặt css-loader và style-loader module NPM:

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

Answer 3

Tôi cũng đã xem qua một vấn đề tương tự sử dụng node-noop.

May thay, sử dụng null làm phương án thay thế khi tôi thêm enzyme và react-addons-test-utils vào dự án.