私は学生のプロジェクトでWebpackを使い始めましたが、ReactとBabelを含むようにWebpackを構成するのに行き詰まっています。ここに私のノードパッケージがあります:
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]
...そしてm'y 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']
}
}
]
}
};
しかし、webpack
コマンドはこのエラーを表示します:
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
(サンプルの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);
したがって、問題は私のwebpack.config.jsにあるようですが、Web上の多くの例から検索したにもかかわらず、なぜなのかわかりません。手伝って頂けますか ?よろしくお願いします!
あなたの設定は
presets: ['es2015', 'react']
インストールした唯一のプリセットは
+-- [email protected]
だからあなたの答えは
npm install --save-dev babel-preset-react
ちなみに、Babel 7(リリース時)では、これについてより明確なエラーメッセージが表示されるので、これらのケースでの作業が楽になります。
以下のコマンドを実行してこのエラーを削除できます:
npm install --save-dev babel-preset-react