Missing preset triggered invalid preset config error

[KyleAMathews]

I was setting up a project with a .babelrc that looked like:

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

and when trying to transpile my code kept getting an error like:

ReferenceError: [BABEL] lib/drawer.jsx: Unknown option: /private/tmp/react-motion-drawer/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: [['presetName', {option: value}]] }`

After googling around quite confused (my .babelrc is a vanilla as it gets) it finally occurred to me that perhaps one of the presets wasn't installed which as turned out to be the problem. Once babel-presets-react was installed things worked.

Expected Behavior

Babel tells me there's missing presets/plugins.

Current Behavior

Babel identifies the wrong problem.

Environment

Mac, Node 6, NPM 3

[hzoo]

That's weird.. I just did that without installing the presets and got Error: Couldn't find preset "es2015" relative to directory like it should?

[Kushan-]

Hi i am getting the same error although i have the preset module installed i am still stuck.

webpack.config
var webpack = require('webpack');

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

.babelrc

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

[loganfsmyth]

@Kushan- What is in your rest-server/src/.babelrc file?

[loganfsmyth]

The error is saying your rest-server/src/.babelrc file has an error in it. Your webpack configuration is in the root, but that will use Babel's configuration from the .babelrc.

[Kushan-]

okay, i found it.. Sorry this is my first time setup.. thank you so much

[aaronang]

I couldn't reproduce this error either. @KyleAMathews Could you maybe walk us through the steps that you took to get to this error?

[KyleAMathews]

I did in the original post... it was just a simple jsx => js file conversion. If no one can reproduce it we can close this.

[loganfsmyth]

Sorry, looks like I never properly replied to this. @aaronang happy to chat more, but essentially this is because of the way we look of presets both with and without the babel-preset- prefix. If you have react as a preset, but you don't have babel-preset-react installed and do have react installed, Babel will try to load React itself as a babel plugin.

It might be worth us considering if there's a way we can generate a single name in all cases, rather than generating multiple possibilities and then trying each one. See https://github.com/babel/babel/blob/d0b6db19011c5c4e84558bb21bcfc2a948f63a82/packages/babel-core/src/config/helpers/get-possible-preset-names.js and https://github.com/babel/babel/blob/d0b6db19011c5c4e84558bb21bcfc2a948f63a82/packages/babel-core/src/config/helpers/get-possible-plugin-names.js

Like we could do name.replace(/^(?:babel-preset-)?/, 'babel-preset-') to always add the prefix, but then if people have created presets without the prefix on npm, there would be unusable.

For instance fast-async for some reason is published without the babel-plugin prefix: https://www.npmjs.com/package/fast-async Maybe we require people do plugin:fast-async to explicitly load things without the preset or something.

We have options, but it's not obvious what the right call would be.

[aaronang]

@loganfsmyth Thanks for the explanation. I can now confirm this error. It indeed occurs when babel-preset-react is not installed while react is installed.

[loganfsmyth]

I posted a PR with a proposed approach: #5547

[hzoo]

Closing via #5547

[loganfsmyth]

This will now throw a much more useful error "Cannot find module 'babel-preset-react'` in 7.x

[KyleAMathews]

Thanks everyone!

[honkinglin]

I am getting the same error, thanks for @loganfsmyth~
I have already solved it.
try this npm i --save-dev babel-preset-react

[ssthil]

It works

without .babelrc I could be resolved adding yarn add --dev babel-preset-react