[Babel]: Unknown option: foreign.Children

Question

I'm getting that error when I build using this script:

webpack --colors --progress --watch --config --jsx-loader webpack.config.js

Here's my package.json file:

{
  "dependencies": {
    "autoprefixer": "^6.0.3",
    "node-libs-browser": "^0.5.3",
    "object-assign": "4.0.1",
    "underscore": "1.8.3",
    "react": "0.14.7",
    "react-dom": "0.14.7",
    "react-router": "2.0.0",
    "history": "^1.17.0",
    "superagent": "^1.8.0",
    "react-addons-css-transition-group": "0.14.7",
    "react-bootstrap": "0.28.2",
    "react-select": "^1.0.0-beta9",
    "moment": "2.11.2",
    "truncate": "2.0.0",
    "superagent-promise-plugin": "2.1.0",
    "rrule": "2.1.0"
  },
  "devDependencies": {
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-stage-0": "^6.5.0",
    "babel-runtime": "^6.11.6",
    "css-loader": "^0.23.1",
    "eslint": "^3.2.2",
    "eslint-config-defaults": "^9.0.0",
    "eslint-loader": "^1.5.0",
    "eslint-plugin-react": "^6.0.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.22.0",
    "isparta-instrumenter-loader": "^1.0.1",
    "jsx-loader": "0.13.2",
    "less": "^2.3.1",
    "less-loader": "^2.2.3",
    "livereload": "^0.5.0",
    "null-loader": "^0.1.1",
    "postcss-loader": "^0.9.1",
    "raw-loader": "^0.5.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.12.13",
    "webpack-livereload-plugin": "0.4.0"
  },
  "babel": {
    "presets": [
      "stage-0",
      "es2015",
      "react"
    ]
  }
}

And my webpack.config.js

var webpack = require('webpack');
var path = require('path');
var LiveReloadPlugin = require('webpack-livereload-plugin')

module.exports = {
    output: {
        path: __dirname,
        filename: "bundle.js",
    },
    resolve: {
        extensions: ['', '.js', '.jsx'],
        root: [
          path.resolve('./../../../../../../Javascripts/modules')
        ],
        moduleDirectories:
        [
          './../../../../../../Javascripts/modules'
        ]
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" },
            {
                test: /\.less$/,
                loader: "style!css!less"
            },
            { test: /\.html$/, loader: 'raw', exclude: [/node_modules/, path.resolve('./../../../../../../Javascripts/modules')] },
            {
                test: /(\.jsx|\.js)$/,
                loader: 'babel',
                exclude: [/(node_modules|bower_components)/]
            },
            {
                test: /(\.jsx|\.js)$/,
                loader: "eslint-loader",
                exclude: [/node_modules/, path.resolve('./../../../../../../Javascripts/modules')]
            }
        ]
    },
    eslint: {
        configFile: './src/js/.eslintrc'
    },
    entry: "./src/index.js",
    plugins: [
        new LiveReloadPlugin()
    ]
};

Any idea how to resolve that error? Based on my Google searches, it's a package versioning issue, but that's all I've been able to figure out.

Answer 1

You might be missing the react babel presets npm package.

Try this:

npm i --save-dev babel-preset-react