Babel-loader: Unknown Option

Created on 2 Nov 2015 · 73Comments · Source: babel/babel-loader

webpack.js:

module: {
    loaders: [
        {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel'
        }
    ]
}

.babelrc:

{
    "blacklist": [
        "useStrict"
    ],
    "plugins": [
        "transform-es2015-modules-commonjs"
    ],
    "presets": [
        "react",
        "es2015",
        "stage-0",
        "stage-1",
        "stage-2",
        "stage-3"
    ]
}

Command:

 ./node_modules/.bin/webpack --config webpack.js

Expected result: successful build

Actual result:

Unknown option: .babelrc.blacklist
at Logger.error (node_modules/babel-core/lib/transformation/file/logger.js:43:11)
at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:245:18)
at OptionManager.addConfig (node_modules/babel-core/lib/transformation/file/options/option-manager.js:206:10)
at OptionManager.findConfigs (node_modules/babel-core/lib/transformation/file/options/option-manager.js:347:16)
at OptionManager.init (node_modules/babel-core/lib/transformation/file/options/option-manager.js:392:12)
at File.initOptions (node_modules/babel-core/lib/transformation/file/index.js:191:75)
at new File (node_modules/babel-core/lib/transformation/file/index.js:122:22)
at Pipeline.transform (node_modules/babel-core/lib/transformation/pipeline.js:42:16)
at transpile (node_modules/babel-loader/index.js:12:22)
at Object.module.exports (node_modules/babel-loader/index.js:69:12)
@ multi export

needs investigation

Source

adamziel

Most helpful comment

Hi, I had a very similar issue where my babel preset options were unknown. I'm pretty new to all this, but npm install babel-preset-es2015 and npm install babel-preset-react solved my problem. I forgot to install the dependencies beforehand, and after installing them things worked out.

sunyang713 on 8 Nov 2015

👍33 🎉13

All 73 comments

Versions of packages:

; npm list | grep babel 
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

adamziel on 2 Nov 2015

Potential problem source: some babel@6 libraries still depending on babel-runtime@5 ?

; npm list
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]

Edit

Nope, I used npm shrinkwrap to enforce babel@6 everywhere but the problem is still present

adamziel on 2 Nov 2015

If anyone else run into this issue, as a temporary workaround I used the following webpack loader:

var removeUseStrict = require('remove-use-strict');

module.exports = function(content) {
    return removeUseStrict(content, {force: true});
};

adamziel on 2 Nov 2015

It happens for "extra" options from this plugin:
https://www.npmjs.com/package/babel-plugin-module-alias

and all other options that are not listed on this page:
https://babeljs.io/docs/usage/options/

adamziel on 2 Nov 2015

Getting a similar issue when running babel with both direct presets, and .babelrc.

.babelrc

{
  "presets": ["es2015", "react"]
}

loaders: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
]

Module build failed: ReferenceError: [BABEL] /Users/cameronjroe/Dropbox/_projects/_react-components/react-star-rating/src/StarRating.jsx: Unknown option: direct.presets

Module build failed: ReferenceError: [BABEL] /Users/cameronjroe/Dropbox/_projects/_react-components/react-star-rating/src/StarRating.jsx: Unknown option: /Users/cameronjroe/Dropbox/_projects/_react-components/react-star-rating/.babelrc.presets

cameronroe on 4 Nov 2015

👍3

Also having this error with the same source as above. :/

Tasemu on 4 Nov 2015

Quick experiment with no promise of success:

Replace:

{
  "presets": ["es2015", "react"]
}

with

{
  "presets": ["react", "es2015"]
}

Couto on 4 Nov 2015

🎉1

Tried already brother, no change unfortunately haha. :/

Tasemu on 4 Nov 2015

I'm having the same issue :(

luisrudge on 5 Nov 2015

Same problem here. (Unknown option: base.extra)

quirinpa on 6 Nov 2015

@quirinpa @adamziel You should report a bug to @tleunen, since he is the maintainer of https://github.com/tleunen/babel-plugin-module-alias

84564221 on 6 Nov 2015

@quirinpa @adamziel I updated the plugin a few days ago to be compatible with Babel 6. So the extra options is not used anymore.
Don't hesitate to open issues in the repo if you still have issues with it :)

tleunen on 6 Nov 2015

sunyang713 on 8 Nov 2015

👍33 🎉13

Oh? @askmatey @tleunen actually i was using the extra options for babel-plugin-react-transform but i think i get it, the extra option has been deprecated, right?

quirinpa on 8 Nov 2015

@quirinpa See babel-plugin-react-transform/issues/46 ...

84564221 on 8 Nov 2015

thanks @askmatey :)

quirinpa on 8 Nov 2015

I'm getting the same thing after upgrading to babel 6.1.4 to fix another issue https://github.com/babel/babel/pull/2908.

const path = require('path')

console.log(process.env.NODE_ENV)

module.exports = {
  entry: './components/index.jsx',
  output: {
    filename: 'bundle.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: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react', 'stage-3']
        }
      }
    ]
  },
  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'],
    alias: {
      config: path.join(__dirname, 'config', process.env.NODE_ENV)
    }
  }
}

uptownhr on 14 Nov 2015

remove all the .babelrc files from the node_modules.
rm $( find node_modules -name .babelrc)

akatebi on 15 Nov 2015

👍3

"exclude" solves the problem.

loaders: [
{
test: /.js$/,
loader: 'babel-loader',
include: [
path.resolve(__dirname, 'test'),
path.resolve(__dirname, 'src')
],
exclude: /node_modules/
},

akatebi on 15 Nov 2015

👍4

I've also encountered this issue. When running webpack with a .babelrc file defining presets.

.babelrc:

{
  "sourceMaps": true,
  "comments": false
}

webpack.config.js:

var webpack = require('webpack');
var path = require('path');

module.exports = {
  entry: [
    //'babel-polyfill',
    './src/index',
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  libraryTarget: 'umd',
  umdNamedDefine: 'pxMobile',
  devtool: 'inline-source-map',
  module: {
    loaders: [{
      test: /\.js?$/,
      exclude: /node_modules/,
      include: [
        path.resolve(__dirname, "src")
      ],
      loader: 'babel',
      query: {
        presets: ['es2015'],
      //  plugins: ['transform-runtime']
      }
    }]
  }
}

But after removing the .babelrc presets property I was able to run it.

Hash: de9841a8804f5d15d742
Version: webpack 1.12.6
Time: 2625ms
    Asset    Size  Chunks             Chunk Names
bundle.js  379 kB       0  [emitted]  main
   [0] multi main 28 bytes {0} [built]
    + 26 hidden modules
npm info lifecycle [email protected]~postwebpack: [email protected]
npm info ok

But adding the presets to the webpack.config.js I was not able to run.

Hash: a15466a376457c6f3383
Version: webpack 1.12.6
Time: 603ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.55 kB       0  [emitted]  main
   [0] multi main 28 bytes {0} [built] [1 error]
    + 1 hidden modules

ERROR in ./src/index.js
Module build failed: ReferenceError: [BABEL] /Users/212400520/GithubEnterprise/predix-mobile-development/px-mobile.js/src/index.js: Unknown option: direct.presets
    at Logger.error (/Users/212400520/GithubEnterprise/predix-mobile-development/px-mobile.js/node_modules/babel-loader/node_modules/babel-core/lib/transformation/file/logger.js:58:11)
    at OptionManager.mergeOptions (/Users/212400520/GithubEnterprise/predix-mobile-development/px-mobile.js/node_modules/babel-loader/node_modules/babel-core/lib/transformation/file/options/option-manager.js:126:29)
    at OptionManager.init (/Users/212400520/GithubEnterprise/predix-mobile-development/px-mobile.js/node_modules/babel-loader/node_modules/babel-core/lib/transformation/file/options/option-manager.js:216:10)
    at File.initOptions (/Users/212400520/GithubEnterprise/predix-mobile-development/px-mobile.js/node_modules/babel-loader/node_modules/babel-core/lib/transformation/file/index.js:147:75)
    at new File (/Users/212400520/GithubEnterprise/predix-mobile-development/px-mobile.js/node_modules/babel-loader/node_modules/babel-core/lib/transformation/file/index.js:137:22)
    at Pipeline.transform (/Users/212400520/GithubEnterprise/predix-mobile-development/px-mobile.js/node_modules/babel-loader/node_modules/babel-core/lib/transformation/pipeline.js:164:16)
    at transpile (/Users/212400520/GithubEnterprise/predix-mobile-development/px-mobile.js/node_modules/babel-loader/index.js:12:22)
    at Object.module.exports (/Users/212400520/GithubEnterprise/predix-mobile-development/px-mobile.js/node_modules/babel-loader/index.js:71:12)
 @ multi main
npm info lifecycle [email protected]~postwebpack: [email protected]
npm info ok

How are we going to run the code threw babel with presets defined?

jonniespratley on 15 Nov 2015

if setting presets will failed.

ERROR in ./src/app/index.js
Module build failed: ReferenceError: [BABEL] /Applications/XAMPP/xamppfiles/htdocs/leancloud/saas-ticket/web-project/src/app/index.js: Unknown option: presets
    at Logger.error (/Applications/XAMPP/xamppfiles/htdocs/leancloud/saas-ticket/web-project/node_modules/babel-core/lib/babel/transformation/file/logger.js:37:11)
    at File.normaliseOptions (/Applications/XAMPP/xamppfiles/htdocs/leancloud/saas-ticket/web-project/node_modules/babel-core/lib/babel/transformation/file/index.js:168:29)
    at new File (/Applications/XAMPP/xamppfiles/htdocs/leancloud/saas-ticket/web-project/node_modules/babel-core/lib/babel/transformation/file/index.js:146:10)
    at TransformerPipeline.transform (/Applications/XAMPP/xamppfiles/htdocs/leancloud/saas-ticket/web-project/node_modules/babel-core/lib/babel/transformation/transformer-pipeline.js:96:16)
    at transpile (/Applications/XAMPP/xamppfiles/htdocs/leancloud/saas-ticket/web-project/node_modules/babel-loader/index.js:12:22)
    at Object.module.exports (/Applications/XAMPP/xamppfiles/htdocs/leancloud/saas-ticket/web-project/node_modules/babel-loader/index.js:71:12)

wangxiao on 15 Nov 2015

Seems to be the same issue.

output

[igor@DJUNTA webpack-test-fail]$ webpack
Hash: b3facd1b1bff8f109f10
Version: webpack 1.12.6
Time: 928ms
    + 1 hidden modules

ERROR in ./app/main.js
Module build failed: ReferenceError: [BABEL] /home/igor/Projects/webpack-test-fail/app/main.js: Unknown option: direct.presets
    at Logger.error (/home/igor/Projects/webpack-test-fail/node_modules/babel-loader/node_modules/babel-core/lib/transformation/file/logger.js:58:11)
    at OptionManager.mergeOptions (/home/igor/Projects/webpack-test-fail/node_modules/babel-loader/node_modules/babel-core/lib/transformation/file/options/option-manager.js:126:29)
    at OptionManager.init (/home/igor/Projects/webpack-test-fail/node_modules/babel-loader/node_modules/babel-core/lib/transformation/file/options/option-manager.js:216:10)
    at File.initOptions (/home/igor/Projects/webpack-test-fail/node_modules/babel-loader/node_modules/babel-core/lib/transformation/file/index.js:147:75)
    at new File (/home/igor/Projects/webpack-test-fail/node_modules/babel-loader/node_modules/babel-core/lib/transformation/file/index.js:137:22)
    at Pipeline.transform (/home/igor/Projects/webpack-test-fail/node_modules/babel-loader/node_modules/babel-core/lib/transformation/pipeline.js:164:16)
    at transpile (/home/igor/Projects/webpack-test-fail/node_modules/babel-loader/index.js:12:22)
    at /home/igor/Projects/webpack-test-fail/node_modules/babel-loader/lib/fs-cache.js:140:16
    at ReadFileContext.callback (/home/igor/Projects/webpack-test-fail/node_modules/babel-loader/lib/fs-cache.js:27:23)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:324:13)

webpack.config.js

var webpack = require('webpack');

module.exports = {
  target: 'web',
  entry: './app/main.js',
  output: {
    filename: './assets/bundle.js',
    outputPath: '/assets/'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          cacheDirectory: true
        }
      }
    ]
  },
  devServer: {
    contentBase: './assets'
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
      }
    })
  ]
};

Igor-Scekic on 15 Nov 2015

I solved it.:bulb:

The issue for me was that npm install babel-loader --save-dev was installing an incorrect version of babel-loader (^5.4.0).

I edited my package.json manually, setting the version to ^6.1.0, removed the node_modules directory, and then ran npm install, which fixed the issue.

Igor-Scekic on 15 Nov 2015

👍8

@Torwori Your problem was most likely related with #159
It should be fixed by now.

Couto on 15 Nov 2015

Error "Unknown option: base.optional"

package.json:

"devDependencies": {
    "babel-core": "^6.1.21",
    "babel-loader": "^6.1.0",
    "babel-plugin-transform-runtime": "^6.1.18",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "babel-preset-stage-0": "^6.1.18"
...

webpack.config.js:

entry: ['babel-polyfill', './src/style/main_src.css', './src/js/bootstrap.jsx'],
...
loaders: [
            {
                loader: "babel-loader",
                exclude: [/node_modules/],
                test: /\.jsx?$/,
                query: {
                    plugins: ['transform-runtime'],
                    presets: ['es2015', 'stage-0', 'react']
                }
            },
...

Error:

ERROR in ./src/js/bootstrap.jsx
Module build failed: ReferenceError: [BABEL] src\js\bootstrap.jsx: Unknown option: base.optional
    at Logger.error (node_modules\babel-core\lib\transformation\file\logger.js:43:11)
    at OptionManager.mergeOptions (node_modules\babel-core\lib\transformation\file\options\option-ma
nager.js:264:18)
    at OptionManager.init (node_modules\babel-core\lib\transformation\file\options\option-manager.js
:414:10)
    at File.initOptions (node_modules\babel-core\lib\transformation\file\index.js:191:75)
    at new File (node_modules\babel-core\lib\transformation\file\index.js:122:22)
    at Pipeline.transform (node_modules\babel-core\lib\transformation\pipeline.js:42:16)
    at transpile (node_modules\babel-loader\index.js:14:22)
    at Object.module.exports (node_modules\babel-loader\index.js:83:14)
 @ multi main

bootstrap.jsx, just in case:

window.React = require('react');
window.ReactDOM = require('react-dom');
window.alt = new (require('alt'));
var AppLoader = require('./components/apploader.jsx');
ReactDOM.render(<AppLoader />, document.getElementById('waitasec'));

gknaxtrader on 17 Nov 2015

Same issue here:

package.json

"devDependencies": {
    "babel-core": "^6.2.0",
    "babel-loader": "^6.2.0",
    "webpack": "^1.12.6",
    "webpack-dev-server": "^1.12.1"
  },
  "dependencies": {
    "react": "^0.14.3",
    "react-dom": "^0.14.3"
  }

webpack config

module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel',
            query : ['react', 'es2015']
        }]
    }

output:

ERROR in ./src/index.js
Module build failed: ReferenceError: [BABEL] user_path/src/index.js: Unknown option: base.["react"
    at Logger.error (user_path/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
    at OptionManager.mergeOptions (user_path/node_modules/babel-core/lib/transformation/file/options/option-manager.js:262:18)
    at OptionManager.init (user_path/node_modules/babel-core/lib/transformation/file/options/option-manager.js:416:10)
    at File.initOptions (user_path/node_modules/babel-core/lib/transformation/file/index.js:190:75)
    at new File (user_path/node_modules/babel-core/lib/transformation/file/index.js:121:22)
    at Pipeline.transform (user_path/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
    at transpile (user_path/node_modules/babel-loader/index.js:14:22)
    at Object.module.exports (user_path/node_modules/babel-loader/index.js:87:14)
 @ multi main

timuric on 19 Nov 2015

Same issue:

  "devDependencies": {
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "bootstrap": "^3.3.5",
    "child-process-promise": "^1.1.0",
    "css-loader": "^0.19.0",
    "extract-text-webpack-plugin": "^0.9.1",
    "file-loader": "^0.8.4",
    "fs-extra-promise": "^0.3.1",
    "json-loader": "^0.5.3",
    "karma": "^0.13.15",
    "less": "^2.5.3",
    "less-loader": "^2.2.1",
    "raw-loader": "^0.5.1",
    "react-hot-loader": "^1.3.0",
    "rimraf-promise": "^2.0.0",
    "style-loader": "^0.12.3",
    "webpack-dev-server": "^1.12.1"
  },
  "dependencies": {
    "babel": "^6.1.18",
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "express": "^4.13.3",
    "font-awesome": "^4.4.0",
    "history": "^1.13.1",
    "react": "^0.14.3",
    "react-addons-update": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-router": "^1.0.0",
    "react-select": "^1.0.0-beta5",
    "webpack": "^1.12.8"
  }

Error:

ReferenceError: [BABEL] /home/andrerpena/Git/react-vnav/webpack/webpack.config.demo.dev.js: Unknown option: base.optional

andrerpena on 25 Nov 2015

@ayhankuru react.js.Children, which was the problem on the issue you posted, can be solved by installing the appropriate Babel presets. My problem, which is with babel.optional, seems to be a bug

andrerpena on 25 Nov 2015

I found the issue for the babel.optional problem.
I had a file called register-babel which I included on top of my webpack config files. This file was like this:

require('babel-core/register')({
    ignore: /node_modules/,
    optional: ['es7.objectRestSpread']
});

First, the option optional is no longer valid.
Second, there's no need for this register-babel file that I had. All I need to do is to add this to the top of the files I want Babel to work on:

require('babel-core/register');

I recommend everyone having this same issue to look for optional on all files and see if you have something similar on your project. If your problem is with babel.[somethingElse], look for [somethingElse] and try to remove it.

andrerpena on 25 Nov 2015

Same issue.

.babelrc

{
  "presets": ["react", "stage-2", "es2015"],
  "plugins": ["react-intl"],
  "extra": {
    "react-intl": {
        "messagesDir": "./cache/messages/",
        "enforceDescriptions": true
    }
  }
}

webpack.config.js

var webpack = require('webpack');

module.exports = {

  module: {
    loaders: [
      { test: /(src|test)(.+)\.js$/, loader: 'babel-loader'},
      { test: require.resolve('react'), loader: 'expose?React' },
    ],
  },
};

package.json

"devDependencies": {
    ...
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-plugin-react-intl": "^2.0.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "babel-preset-stage-2": "^6.1.18",
    "webpack": "^1.12.1",
    "webpack-dev-middleware": "^1.0.11"
  },
  "dependencies": {
    ...
    "intl": "^1.0.0",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-intl": "^2.0.0-beta-1"
   ...
  }

trevordmiller on 26 Nov 2015

It seems that the trouble is within the es2015 preset plugins, at least given my config...

    "babel": "~6.2.4",
    "babel-cli": "~6.2.4",
    "babel-core": "~6.2.4",
    "babel-eslint": "~4.1.6",
    "babel-loader": "~6.2.0",
    "babel-polyfill": "~6.2.4",
    "babel-preset-es2015": "~6.2.4",
    "babel-preset-react": "~6.2.4",
    "babel-preset-stage-0": "~6.2.4",
    "babel-runtime": "~6.2.4",

mikestopcontinues on 26 Nov 2015

I am getting the same problem. .babelrc loads in simply es2015.

    "babel-core": "^6.1.21",
    "babel-loader": "^6.1.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",

So I used updtr to bump the dependencies to the latest versions and it seems to now work.

    "babel-core": "6.2.1",
    "babel-loader": "6.1.0",
    "babel-preset-es2015": "6.1.18",
    "babel-preset-react": "6.1.18"

I love Javascript. :(

conatus on 29 Nov 2015

🎉1

For me, this problem stemmed from referencing babel-runtime in the old way, like so: loader: 'babel-loader?optional[]=runtime' instead of the new way.

deepfriedmind on 30 Nov 2015

👍2

pentateu on 1 Dec 2015

@deepfriedmind solved this issue for me.

mikestopcontinues on 1 Dec 2015

I was having the same issue: ReferenceError: [BABEL] repl: Unknown option: presets which I had defined in .babelrc. Only thing that helped me was to install babel-cli. After that everything worked fine.

npm install --global babel-cli

zoeesilcock on 1 Dec 2015

👍2

Hi,

I am also getting "Unknown Option" error at https://github.com/benoithubert/sails-ember-carpooling/issues/10.

What should I do ?

Thanks.

kirantpatil on 2 Dec 2015

This is interesting: I've got some mocha tests running with babel but that _requires_ the .babelrc entry for presets. mocha --compilers js:babel-register tests/

With that .babelrc file present (and like others, it's just the one entry for "es2015"), mocha runs its tests fine. But webpack fails. Without the .babelrc file, webpack runs but mocha fails. Facepalm.

brandonaaskov on 8 Dec 2015

For what it's worth, my solution was an amalgamation of a few others' solutions. First, babel-core and babel-loader were still 5.x.x so I got the latest (6.3.15 and 6.2.0, respectively). While I had installed babel-preset-es2015, I was missing a few others.

I then added babel-preset-react, babel-preset-stage-2 and babel-preset-stage-0 based on some ES7 features I'm using. I then added those to my .babelrc file:

{
  "presets": ["react", "es2015", "stage-2", "stage-0"]
}

And that solved it for me. Webpack runs as it should, and my tests run as they should.

brandonaaskov on 8 Dec 2015

I was having this issue. I needed to remove stage-0 from the configuration of my gulpfile.js in my browserify task.

danielstern on 9 Dec 2015

👍1

I am having similar issues with babel-brunch and react inside of a Phoenix application. Adding either the es2015 and/or react preset gives me the following error:

Compiling of 'web/static/js/app.js' failed. [BABEL] web/static/js/app.js: Unknown option: direct.presets ;

codeithuman on 12 Dec 2015

@ajrob27, can you show us the contents of your package.json file? Mostly just curious what the versions of babel-loader and babel-core are.

brandonaaskov on 12 Dec 2015

@brandonaaskov, you bet! I happened to figure it out too.

I fixed it by updating my package.json to use babel-brunch v6.x.x instead of v5.x.x. This fixed my babel issue, but then I ran into a phoenix issue and had to fork phoenix and apply this change.

package.json

{
  "repository": {},
  "dependencies": {
    "babel-brunch": "^6.0.0",
    "bourbon": "^4.2.6",
    "bourbon-neat": "^1.7.2",
    "brunch": "^1.8.5",
    "clean-css-brunch": ">= 1.0 < 1.8",
    "css-brunch": ">= 1.0 < 1.8",
    "javascript-brunch": ">= 1.0 < 1.8",
    "sass-brunch": "^1.9.1",
    "uglify-js-brunch": ">= 1.0 < 1.8"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "bower": "^1.6.5",
    "standard": "^5.3.1"
  },
  "scripts": {
    "test": "standard web/static/**/*.js"
  }
}

and in my brunch-congif.js I have (I am not using a .babelrc file):

...
plugins: {
    babel: {
      presets: ["es2015", "react"],
      ignore: [/web\/static\/vendor/]
    }
  },
...

I should also mention that Phoenix master has been updated to use babel-brunch v6.0.0 and include the fix linked above. I'm assuming these will be released with Phoenix v1.0.5 (current version is v1.0.4).

codeithuman on 13 Dec 2015

Running into this when I use babel-plugin-react-transform - seems the plugins are using Babel 5, but my package is running Babel 6. Might that result in this issue?

IanMitchell on 15 Dec 2015

@IanMitchell Babel 6 is what you want. Are you using Phoenix and Brunch? I had to do a little more trickery to get React and ReactDOM working.

In my Phoenix app I have the following folder structure for my js:

web/static/js
--/react
-----react-dom.js
-----react.js
--/components
-----map.js
--app.js

The react-dom.js and react.js are just namespaces and fix a weird bug with Brunch and ReactDOM:

//react-dom.js
// This workaround fixes an error related to Brunch and ReactDOM requiring React
import React from 'bower_components/react/react';
export default React.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

//react.js
import React from 'bower_components/react/react';
export default React;

And then the app.js and map.js component look like the following:

//app.js
import 'deps/phoenix_html/web/static/js/phoenix_html'
import React from './react/react'
import ReactDOM from './react/react-dom'
import Map from './components/map'
ReactDOM.render(<Map />, document.getElementById('map-container'))

//map.js
import React from '../react/react'
import ReactDOM from '../react/react-dom'

class Map extends React.Component {
  render() {
    return <div id="map"></div>
  }

  componentDidMount() {
    //Load mapbox map
  }
}

export default Map

And brunch-config.js plugins look like this now:

...
  plugins: {
    babel: {
      presets: ["es2015", "react"],
      ignore: [/^(node_modules|bower_components|vendor)/]
    }
  },
...

package.json

{
  "repository": {},
  "dependencies": {
    "babel-brunch": "^6.0.0",
    "bourbon": "^4.2.6",
    "bourbon-neat": "^1.7.2",
    "brunch": "^1.8.5",
    "clean-css-brunch": ">= 1.0 < 1.8",
    "css-brunch": ">= 1.0 < 1.8",
    "javascript-brunch": ">= 1.0 < 1.8",
    "sass-brunch": "^1.9.1",
    "uglify-js-brunch": ">= 1.0 < 1.8"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "bower": "^1.6.5",
    "standard": "^5.3.1"
  },
  "scripts": {
    "test": "standard web/static/**/*.js"
  }
}

And bower.json

{
  "name": "myapp",
  "dependencies": {
    "react": "~0.14.3"
  }
}

I could not get React, ReactDOM, Phoenix and Brunch to play nice for the longest time. This is the simplest way I've found to get everything setup. I also had to fork Phoenix at tag v1.0.4 and apply a commit that was not include in the v1.0.4 release, but is already included in master. Here is the PR, https://github.com/phoenixframework/phoenix/commit/54f384485df02f2b9654cd422ea7b4f6a1cb778c.

Alternatively, you could use Webpack instead of Brunch, but Webpack converts all static assets, like css, to javascript which sounds like it could cause even more problems in the future.

codeithuman on 16 Dec 2015

Module build failed: ReferenceError: [BABEL] /work/test/rate-pc/node_modules/redux-router/lib/index.js: Unknown option: /work/test/rate-pc/node_modules/redux-router/.babelrc.stage
at Logger.error (/work/npms/sdk-rtool/node_modules/babel-core/lib/transformation/file/logger.js:41:11)

zhoujianlin8 on 16 Dec 2015

FYI, I hit this error because I had babel-loader installed but not babel-core (it's not automatically installed because it's a peer dependency)

timwis on 21 Dec 2015

👍3 🎉1

Removing all (other) .babelrc, as suggested by @akatebi, solved the issue for me.

marcolz on 5 Jan 2016

What @sunyang713 said solved the issue for me:

npm install babel-preset-es2015 and npm install babel-preset-react

Thanks!

amcsi on 10 Jan 2016

@IanMitchell Rolling back to babel 5 did the job

nodegin on 12 Jan 2016

I've installed babel-preset-es2015 & babel-preset-react in my project but still encountered this problem. But removing node_modules & .babelrc at $HOME path solved this.

NdYAG on 13 Jan 2016

👍1

thanks @sunyang713 solved my problem

zhuping on 2 Feb 2016

@timwis suggestion to install babel-core saved the day for me ...

agonbina on 4 Feb 2016

I'm seeing this problem when symlinking another project with a .babelrc into another projects node_modules. Even though the parent project has its own .babelrc it appears to be choking on the .babelrc of the child project. Could be that we are recursively searching for .babelrcs?

gravitypersists on 10 Feb 2016

I'm having the same issue ...

thonymg on 18 Feb 2016

This issue crops up on me in a previously working situation. An unchanged gulp.babel.js stops working after what I'm _guessing_ is an npm update or add of a package. My only solution is to rm -Rf node_modules && npm install

rosskevin on 18 Feb 2016

I have an instance where a module in node_modules uses babel, but doesn't have a .babelrc file. Similar errors are occurring for me as well.

dictions on 23 Feb 2016

😄1

Getting similar error on the react-native-relay project when I run the react-native command. I have no .babelrc file and also deleted .babel.json

$ node -v
v5.0.0
$ react-native -v
react-native-cli: 0.1.10
react-native: 0.18.0
$ react-native
/Users/git/react-native-relay/node_modules/babel-core/lib/transformation/file/logger.js:41
throw new Constructor(this._buildMessage(msg));
^
ReferenceError: [BABEL] /Users/git/react-native-relay/node_modules/react-native/local-cli/bundle/bundle.js: Unknown option: base.stage
at Logger.error (/Users/git/react-native-relay/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
at OptionManager.mergeOptions (/Users/git/react-native-relay/node_modules/babel-core/lib/transformation/file/options/option-manager.js:262:18)
at OptionManager.init (/Users/git/react-native-relay/node_modules/babel-core/lib/transformation/file/options/option-manager.js:416:10)
at File.initOptions (/Users/git/react-native-relay/node_modules/babel-core/lib/transformation/file/index.js:191:75)
at new File (/Users/git/react-native-relay/node_modules/babel-core/lib/transformation/file/index.js:122:22)
at Pipeline.transform (/Users/git/react-native-relay/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
at Object.transformFileSync (/Users/git/react-native-relay/node_modules/babel-core/lib/api/node.js:116:10)
at compile (/Users/git/react-native-relay/node_modules/babel-register/lib/node.js:102:20)
at loader (/Users/git/react-native-relay/node_modules/babel-register/lib/node.js:130:14)
at Object.require.extensions.(anonymous function) as .js

guofoo on 26 Feb 2016

If you are getting unknown option on babel 6 it's either that you spelled the option wrong or are using a .babelrc with options for babel 5 and was removed in babel 6 (stage, whitelist, blacklist, etc).

We'll work on making that more clear (will do a PR soon) - so will probably throw an error if you use any options from https://gist.github.com/hzoo/7e78b12d99e326f2e04f

hzoo on 26 Feb 2016

Made https://github.com/babel/babel/pull/3377 for adding some more informative error messages for babel 5 options removed in babel 6

Example for stage

Babel 5 option: base.stage - Check out the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets

hzoo on 27 Feb 2016

I had this problem as well (Unknown option: direct.presets). It seems to have stemmed from a mismatch in Babel 6 installed globally and Babel 5 installed locally. Updating the local copy solved it.

dangerismycat on 9 Mar 2016

👍5

@dangerismycat I've just had the same problem, specifically I had a global .babelrc (god knows why) that was being picked up that had Babel 6 options. The local copy was Babel 5. I couldn't just update the app to Babel 6 for legacy reasons but removing the global .babelrc did the trick.

Ghirro on 11 Mar 2016

surfjedi on 23 Mar 2016

By upgrading babel-loader to 6.2.4 (and babel-core to 6.8.0), I don't seems to have this problem anymore.

yookoala on 8 May 2016

👍1

I must say I also have this problem when loading gulpfile.babel.js:

// .babelrc
{
  "presets": ["es2015"]
}

AFAICS I'm using babel 6:

$ npm list --depth 0 | grep babel
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]

Yet I'm still getting that error:

{ [ReferenceError: [BABEL] /my/project/assets/js/app.js: Unknown option: /my/project/.babelrc.presets while parsing file:  /my/project/assets/js/app.js]
  filename: ' /my/project/assets/js/app.js',

theofidry on 12 May 2016

@theofidry You're on the wrong version of babelify, you want 7.x.

loganfsmyth on 12 May 2016

Indeed did the trick, sorry forgot to update the issue.

theofidry on 12 May 2016

Removing "whitelist": [...,... ] from babelrc solve this issue for me

nobalmohan on 13 May 2016

I have solved my problems.My error is Module build failed: ReferenceError: [BABEL] D:codernode.jswebpackappindex.js: Unknown option: base.preset. Check out http://babeljs.io/docs/usage/options/ for more info.

it's a really fuck and silly error.I forget "s" behind "preset",and it should be "presets"

regiondavid on 16 May 2016

👍1

Ok, what I did after read all his posts.

Deleted all babel modules and plugins from node_modules folder.
npm install

At the end of npm install, my npm always show installed modules and I've noticed a lot of libraries that was using babel 5 (But I was installing 6).

Finally, I've updated all these libraries and worked, now, everything with Babel 6.

Laucsen on 1 Jun 2016

I think this issue should be closed since there's just too many comments for people to know what is going on. I will post a summary of the potential solutions.

If you are getting unknown option on babel 6 you could of spelled the option wrong or are using a .babelrc with options for babel 5 that was removed in babel 6 (stage, whitelist, blacklist, etc).

For example you might be using preset when the option is actually presets.

Or it could be because you have a global and a local version of babel and one of those is still on Babel 5, or that you are loading the files for another project that is also still on babel 5.

Or make sure you are on the latest versions of the packages you are using (babel-loader, babel, etc) and that the correct packages are installed rather than just specifying the correct config.

hzoo on 1 Jun 2016

👍4 🎉2

Please try

./node_modules/.bin/babel [--your command--]

guolin on 20 Nov 2016

I'm going to lock this as well since this issue is so long and it's hard to know what's the real issue. Please make a new issue if needed (if the answers above don't help) and please join our slack for other help!

hzoo on 21 Nov 2016

Was this page helpful?

0 / 5 - 0 ratings