babel: Missing preset triggered invalid preset config error

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

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 1
Comments: 15 (9 by maintainers)

Most upvoted comments

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.

+13

loganfsmyth on Mar 24, 2017

@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.

+12

aaronang on Mar 25, 2017

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

honkinglin on Feb 9, 2018

It works

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

ssthil on Feb 24, 2018

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

loganfsmyth on Apr 17, 2017

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

loganfsmyth on Feb 4, 2017

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.

loganfsmyth on Feb 4, 2017