Webpack: node_modules/css/index.js hat keine Funktion zurückgegeben

Question

Ich probiere Webpack zum ersten Mal aus und benutze this tutorial, um loszulegen und react.js einzuschließen.

Nach Abschluss der Schritte und Installation der style und css Modul bekomme ich immer einen Fehler, dass das CSS-Modul keine Funktion zurückgegeben hat.

Das ist mein 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')); 

Und meine webpack Konfigurationsdatei:

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

Wenn webpack versucht das Projekt es immer heißt es in den folgenden Fehler zu bündeln:

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 

Ich weiß nicht, was ich dagegen tun soll. Ist jemand auf dieses Problem gestoßen? Und wie kann ich es lösen?

EDIT: Meine Auswahl sieht wie folgt aus:

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

Answer 1

Dieser Fehler wird von einem css Modul innerhalb node_modules verursacht wird. Da Sie in Ihrer Konfiguration den css -loader angegeben haben, versucht webpack, den Loader innerhalb von node_modules zu suchen und findet ein anderes Modul namens css, das nicht wie ein Loader aussieht (daher die Fehlermeldung).

Um Verwechslungen zu vermeiden, fügen Sie einfach den Postfix -loader zu jedem Loader hinzu. Das -loader Postfix zu entfernen ist nur eine Bequemlichkeitsfunktion von webpack, aber leider ist es der Übeltäter dieses Fehlers in Ihrem Fall.

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

Update: Beginnend mit webpack 2, können Sie die -loader postfix nicht mehr verzichten. Wir haben uns dazu entschlossen, Fehler wie diese zu vermeiden.

Answer 2

Ich hatte ein ähnliches Problem mit react-flexbox-grid. In meinem Fall war die Installation der Lösung css-loader und style-loader npm Module:

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

Answer 3

ich auf ein ähnliches Problem auch node-noop Verwendung kam.

Glücklicherweise funktionierte die Verwendung von null als Ersatz, als ich enzyme und react-addons-test-utils zu einem Projekt hinzufügte.