web-dev-qa-db-fra.com

Webpack: node_modules/css/index.js n'a pas renvoyé de fonction

J'essaie webpack pour la première fois et utilise ce tutoriel pour commencer et inclure react.js.

Après avoir terminé les étapes et installé les modules style et css, le message d'erreur indiquant que le module css n'a pas renvoyé de fonction continue à apparaître.

Voici mon 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'));

Et mon fichier de configuration 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']
    }
};

Lorsque Webpack tente de regrouper le projet, il indique toujours l'erreur suivante:

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

Je ne sais pas quoi faire à ce sujet. Quelqu'un at-il rencontré ce problème? Et comment puis-je le résoudre?

EDIT: Mon répertoire se présente comme suit:

holmes/
  ui/
    css/
      normalize.css
    src/
      Test/
        Hello.jsx
      index.jsx
    index.html
  package.json
  webpack.config.js
javascriptwebpack
17
Johannes Klauß

Cette erreur est due à un module css dans node_modules. Puisque vous avez spécifié le chargeur css- dans votre configuration, Webpack tente de le rechercher dans node_modules et trouve un autre module appelé css qui ne ressemble pas à un chargeur (d'où le message d'erreur).

Pour éviter toute confusion, vous devez simplement ajouter le suffixe -loader à chaque chargeur. Omettre le suffixe -loader n’est qu’une fonctionnalité pratique de Webpack, mais c’est malheureusement le coupable de cette erreur dans votre cas.

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

Mise à jour: à partir de Webpack 2, vous ne pouvez plus omettre le postcode -loader. Nous avons décidé de le faire pour éviter de telles erreurs.

49
Johannes Ewald

J'ai eu un problème similaire avec react-flexbox-grid. Dans mon cas, la solution consistait à installer les modules css-loader et style-loader npm:

npm install css-loader style-loader --save-dev
6
Guilherme Garnier

J'ai également rencontré un problème similaire en utilisant node-noop.

Heureusement, utiliser null en remplacement a fonctionné lorsque j’ai ajouté enzyme et react-addons-test-utils à un projet.

0
Keysox