Webpack: node_modules/css/index.js bir işlev döndürmedi

Question

Webpack'i ilk kez deniyorum ve çalışmaya başlamak için this tutorial'u kullanın ve react.js'yi ekleyin.

Adımları tamamladıktan ve style ve css modüllerini yükledikten sonra, css modülünün bir işlev döndürmediği konusunda bir hata alıyorum.

Bu

benim index.jsx geçerli:

/** @jsx React.DOM */ 

'use strict'; 

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

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

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

Ve webpack yapılandırma dosyası:

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 her zaman aşağıdaki hatayı bildiren projeyi paket çalıştığında:

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 

Bu konuda ne yapacağımı bilmiyorum. Bu sorunla karşılaştı mı? Ve bunu nasıl çözebilirim?

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

Answer 1

Bu hata node_modules içinde css modül kaynaklanır:

DÜZENLEME şu şekildedir: My dizin görünüyor. Yapılandırmanızda css -loader'ı belirttiğinizden, webpack, bu yükleyiciyi node_modules içinde aramaya çalışır ve css adlı başka bir modül bulur ve bu da bir yükleyiciye benzememektedir (bu nedenle hata iletisi).

Karışıklığı önlemek için, her bir yükleyiciye -loader posta kodunu eklemeniz yeterlidir. -loader postfix'in çıkarılması, webpack tarafından yapılan bir kolaylık özelliğidir, ancak maalesef bu hatanın davasında da suçludur.

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

Güncelleme: WebPack 2 ile başlayarak, artık -loader postfix'i geçemeyeceğim. Bunun gibi hataları önlemek için bunu yapmaya karar verdik.

Answer 2

react-flexbox-grid ile benzer bir sorun yaşadım. Ben de node-noop kullanarak benzer bir sorun geldi

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

Answer 3

: Benim durumumda, çözüm css-loader ve style-loader npm modüllerini takmadan edildi. Bir projeye enzyme ve react-addons-test-utils eklediğimde, çalışan bir yedek olarak null'u kullanarak neyse ki işe yaradım.