reactjs - script - ¿Qué pasa con mi configuración de Webpack?

webpack loaders

Question

Empecé a usar Webpack para un proyecto de estudiante, pero estoy atascado configurando Webpack para incluir React y Babel. Aquí están mis paquetes de nodos:

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

... Y mi archivo de configuración de 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'']
                }
            }
        ]
    }
};

Pero el comando webpack me muestra este error:

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

(Hay mi archivo de muestra 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);

Así que el problema parece provenir de mi webpack.config.js, pero no sé por qué, a pesar de haber buscado entre muchos ejemplos en la web. Me puedes ayudar ? Gracias !

Answer 1

Tu configuración es

presets: [''es2015'', ''react'']

pero el único preajuste que has instalado es

+-- [email protected]

Entonces tu respuesta es

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

Editar:

FYI, Babel 7 (cuando se lanza) da un mensaje de error mucho más claro sobre esto, por lo que hará la vida más fácil para estos casos.