web-dev-qa-db-fra.com

Quel est le problème avec ma configuration Webpack?

J'ai commencé à utiliser Webpack pour un projet étudiant, mais je ne suis pas parvenu à configurer Webpack pour qu'il intègre React et Babel. Voici mes paquets de noeud:

+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

... Et le fichier de configuration de mon webpack:

module.exports = {
    entry: ['babel-polyfill', './src/index.jsx'],
    output: {
        path: './build',
        filename: 'app.bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};

Mais la commande webpack montre cette erreur:

ERROR in ./src/index.jsx
Module build failed: ReferenceError: [BABEL] C:\wamp\www\tripfighter\src\index.jsx: Unknown option: C:\wamp\www\tripfighter\node_modules\react\react.js.Children. Check out http://babeljs.io/docs/usage/options/ for more information about options.

A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

Invalid:
  `{ presets: [{option: value}] }`
Valid:
  `{ presets: ['pluginName', {option: value}] }`

For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options. (While processing preset: "C:\\wamp\\www\\tripfighter\\node_modules\\react\\react.js")
    at Logger.error (C:\wamp\www\tripfighter\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
    at OptionManager.mergeOptions (C:\wamp\www\tripfighter\node_modules\babel-core\lib\transformation\file\options\option-manager.js:221:20)
    at C:\wamp\www\tripfighter\node_modules\babel-core\lib\transformation\file\options\option-manager.js:260:14
    at C:\wamp\www\tripfighter\node_modules\babel-core\lib\transformation\file\options\option-manager.js:329:22
    at Array.map (native)
    at OptionManager.resolvePresets (C:\wamp\www\tripfighter\node_modules\babel-core\lib\transformation\file\options\option-manager.js:270:20)
    at OptionManager.mergePresets (C:\wamp\www\tripfighter\node_modules\babel-core\lib\transformation\file\options\option-manager.js:259:10)
    at OptionManager.mergeOptions (C:\wamp\www\tripfighter\node_modules\babel-core\lib\transformation\file\options\option-manager.js:244:14)
    at OptionManager.init (C:\wamp\www\tripfighter\node_modules\babel-core\lib\transformation\file\options\option-manager.js:374:12)
    at File.initOptions (C:\wamp\www\tripfighter\node_modules\babel-core\lib\transformation\file\index.js:216:65)
    at new File (C:\wamp\www\tripfighter\node_modules\babel-core\lib\transformation\file\index.js:139:24)
    at Pipeline.transform (C:\wamp\www\tripfighter\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
    at transpile (C:\wamp\www\tripfighter\node_modules\babel-loader\index.js:38:20)
    at Object.module.exports (C:\wamp\www\tripfighter\node_modules\babel-loader\index.js:131:12)
 @ multi main

(Voici mon exemple de fichier index.jsx)

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

import cats from './cats.js';
console.log(cats);

Donc, le problème semble provenir de mon webpack.config.js, mais je ne sais pas pourquoi, malgré les nombreux exemples sur le Web . Pouvez-vous m'aider? Merci !

reactjswebpackbabeljsbabel-polyfill
11
Thaledric

Votre config est

presets: ['es2015', 'react']

mais le seul préréglage que vous avez installé est

+-- [email protected]

Donc, votre réponse est

npm install --save-dev babel-preset-react

Modifier:

Pour info, Babel 7 (quand il sortira) donne un message d'erreur beaucoup plus clair à ce sujet, ce qui facilitera la vie de ces cas.

41
loganfsmyth

Vous pouvez supprimer cette erreur en exécutant la commande ci-dessous: 

npm install --save-dev babel-preset-react
0
Shubham Verma