Error: Couldn't find preset "react" when installed using npm install --global babel-preset-react but works without global flag

Question

I installed Babel CLI (version 6) using npm install --global babel-cli. I then install react preset using npm install --global babel-preset-react.

I then setup the .babelrc file in the project directory to

{
    "presets": ["react"]
}

When I try to build a JSX file it fails with

Error: Couldn't find preset "react"
    at OptionManager.mergePresets (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:310:17)
    at OptionManager.mergeOptions (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:270:12)
    at OptionManager.addConfig (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:206:10)
    at OptionManager.findConfigs (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:347:16)
    at OptionManager.init (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:392:12)
    at File.initOptions (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/index.js:191:75)
    at new File (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/index.js:122:22)
    at Pipeline.transform (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
    at transform (/usr/local/lib/node_modules/babel-cli/lib/babel/util.js:53:22)
    at Object.compile (/usr/local/lib/node_modules/babel-cli/lib/babel/util.js:62:12)

If I install the preset without --global flag (i.e. installs in node_modules/ folder locally) then the build works. How do i set up to get babel to work with a global preset?

Answer 1

You can specify the absolute (or relative) path to the preset you are trying to use, e.g:

babel --presets /usr/local/lib/node_modules/babel-preset-react --watch jsx/ --out-dir js/

Answer 2

Optional Fix

You can do it this way. Write these lines in your prompt. Now the only thing is with global you might have to use the fix suggested above by @Petar which is

babel --presets /usr/local/lib/node_modules/babel-preset-react --watch jsx/ --out-dir js/

but this one does all you need.

npm i babel-cli babel-preset-react 

babel --presets react jsx/ --watch --out-dir js/

and Then optionally add a .gitignore file in your github repo with content = node_modules/ now run your jsx transformation with the same command.