Couldn't find preset "es2015" relative to directory

[lorenzosjb]

I am using Webstorm 2016.2.2.

I created the project and started it until the point of seeing the webpage up and running.
When I change something simple from src/App.js like the title text it show the error below.

It's missing dependencies on the project? I added babel-core, babel-loader, babel-preset-es2015, babel-preset-react to the dependencies and it worked

cmd.exe /D /C call C:/Users/jimenelo/Documents/NetBeansProjects/my-app/node_modules/.bin/babel.cmd --source-maps --out-file App-compiled.js --presets es2015 C:\Users\jimenelo\WebstormProjects\new-app\src\App.js
Error: Couldn't find preset "es2015" relative to directory "C:/Users/jimenelo/WebstormProjects/new-app/src"
at C:\Users\jimenelo\Documents\NetBeansProjects\my-app\node_modules\babel-core\lib\transformation\file\options\option-manager.js:281:17
at Array.map (native)
at OptionManager.resolvePresets (C:\Users\jimenelo\Documents\NetBeansProjects\my-app\node_modules\babel-core\lib\transformation\file\options\option-manager.js:265:20)
at OptionManager.mergePresets (C:\Users\jimenelo\Documents\NetBeansProjects\my-app\node_modules\babel-core\lib\transformation\file\options\option-manager.js:254:10)
at OptionManager.mergeOptions (C:\Users\jimenelo\Documents\NetBeansProjects\my-app\node_modules\babel-core\lib\transformation\file\options\option-manager.js:239:14)
at OptionManager.init (C:\Users\jimenelo\Documents\NetBeansProjects\my-app\node_modules\babel-core\lib\transformation\file\options\option-manager.js:338:12)
at File.initOptions (C:\Users\jimenelo\Documents\NetBeansProjects\my-app\node_modules\babel-core\lib\transformation\file\index.js:216:65)
at new File (C:\Users\jimenelo\Documents\NetBeansProjects\my-app\node_modules\babel-core\lib\transformation\file\index.js:137:24)
at Pipeline.transform (C:\Users\jimenelo\Documents\NetBeansProjects\my-app\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
at transform (C:\Users\jimenelo\Documents\NetBeansProjects\my-app\node_modules\babel-cli\lib\babel\util.js:50:22)

Process finished with exit code 1

Adding the new dependencies created sort of problem:

cmd.exe /D /C call C:/Users/jimenelo/Documents/NetBeansProjects/my-app/node_modules/.bin/babel.cmd --source-maps --out-file App-compiled.js --presets es2015 C:\Users\jimenelo\WebstormProjects\new-app\src\App.js
SyntaxError: C:/Users/jimenelo/WebstormProjects/new-app/src/App.js: Unexpected token (8:6)
6 | render() {
7 | return (

8 |

| ^
9 |

10 |
11 |

Hello again From React

Process finished with exit code 1

[gaearon]

What is this command? Did you type it by hand? Does some tool run it? This is definitely not how CRA projects should be used so I am very surprised to see it.

cmd.exe /D /C call C:/Users/jimenelo/Documents/NetBeansProjects/my-app/node_modules/.bin/babel.cmd --source-maps --out-file App-compiled.js --presets es2015 C:\Users\jimenelo\WebstormProjects\new-app\src\App.js

[gaearon]

If you use something like Babel watcher described here, please disable it: https://blog.jetbrains.com/webstorm/2015/05/ecmascript-6-in-webstorm-transpiling/. It is not needed with Create React App and will not work correctly. Create React App setup takes care of transpilation so you don't need your IDE to call Babel.

[gaearon]

cc @prigara

[prigara]

Hi @lorenzosjb!
@gaearon is right, with react-create-app you don't need to use a file watcher. All you need to do is to open a project created with react-create-app and then run npm start in the terminal or double-click on the start task in the npm tool window in WebStorm.
We're currently working on integration with react-create-app, we won't show this misleading suggestion to add a file watcher for these projects.

[gaearon]

👍 Thanks for the update!

[lorenzosjb]

Thanks to all, prigara and gaearon