Couldn't find preset "es2015" relative to directory

Question

I starting with React and Flux architecture using the egghead.io tutorial but I met some troubles with babel.

I'm getting the error, when trying to run my application with webpack-dev-server. Here is the errors:

ERROR in The node API for `babel` has been moved to `babel-core`.
 @ (webpack)-dev-server/client?http://localhost:3002 1:10-24

ERROR in The node API for `babel` has been moved to `babel-core`.
 @ (webpack)-dev-server/client?http://localhost:3002 3:16-37

ERROR in The node API for `babel` has been moved to `babel-core`.
 @ (webpack)-dev-server/client?http://localhost:3002 2:13-37

ERROR in (webpack)/~/process/browser.js
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/usr/local/lib/node_modules/webpack/node_modules/process"
    at /var/www/public/flux/node_modules/babel-core/lib/transformation/file/options/option-manager.js:372:17
    at Array.map (native)
    at OptionManager.resolvePresets (/var/www/public/flux/node_modules/babel-core/lib/transformation/file/options/option-manager.js:364:20)
    at OptionManager.mergePresets (/var/www/public/flux/node_modules/babel-core/lib/transformation/file/options/option-manager.js:348:10)
    at OptionManager.mergeOptions (/var/www/public/flux/node_modules/babel-core/lib/transformation/file/options/option-manager.js:307:14)
    at OptionManager.init (/var/www/public/flux/node_modules/babel-core/lib/transformation/file/options/option-manager.js:465:10)
    at File.initOptions (/var/www/public/flux/node_modules/babel-core/lib/transformation/file/index.js:194:75)
    at new File (/var/www/public/flux/node_modules/babel-core/lib/transformation/file/index.js:123:22)
    at Pipeline.transform (/var/www/public/flux/node_modules/babel-core/lib/transformation/pipeline.js:45:16)
    at transpile (/var/www/public/flux/node_modules/babel-loader/index.js:14:22)
 @ ./~/react/lib/ReactDOM.js 1:0-78

Also, here is my webpack config file:

module.exports = {
    entry: "./src/js/main.js",
    output: {
        path: "./dist",
        filename: "bundle.js",
        publicPath: "/"
    },
    devServer: {
        inline: true,
        port: 3002,
        contentBase: "./dist"
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exlude: /(node_modules|bower_components)/,
                loader: "babel",
                query: {
                    presets: ["es2015", "react"]
                }
            }
        ]
    }
};

And also my package.json file with all dependecies:

 {
  "name": "flux-jenezis",
  "version": "1.0.0",
  "description": "Flux realisatoin usign egghead guide",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "keywords": [
    "flux",
    "react"
  ],
  "author": "jenezis",
  "license": "ISC",
  "dependencies": {    
    "flux": "^2.1.1",
    "react": "^15.0.2",
    "react-dom": "^15.0.2",
    "react-router": "^2.4.0"
  },
  "devDependencies": {
    "babel-core": "^6.7.7",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0"
  }
}

Doyes anyoyne saw or maybe solved this problem?

PS: Node version: 5.0.0, NPM version: 3.7.5

UPD: All packages and dependencies installed with npm --no-bin-links flag, because of Windows shared folders...

Possible duplicate of [Error: Couldn't find preset "es2015" relative to directory "/Users/username"](http://stackoverflow.com/questions/34819473/error-couldnt-find-preset-es2015-relative-to-directory-users-username) — Damjan Pavlica, Oct 13 '16 at 07:54

score 6 · Accepted Answer · answered May 02 '16 at 16:58

6

exlude: /(node_modules|bower_components)/,

should be

exclude: /(node_modules|bower_components)/,

answered May 02 '16 at 16:58

loganfsmyth

156,129
30
331
251

Thank you very much! I had to bundle a library called tween.js and I have also got the error all the time. My problem was, that I didn't had the exclude parameter in my webpack.config.json! Can someone explain what the exclude does? – bajro Jan 11 '17 at 15:38

score 4 · Answer 2 · answered Jul 14 '16 at 10:51

4

the "es2015" in :

    .pipe(babel({
        presets: ['es2015']
    }))

is actually a path - so if you don't have the es2015 preset in the /usr/local/lib/node_modules/webpack/node_modules/process/es2015 directory you have to point exactly to it like for instance:

.pipe(babel({
    presets: ['../../gulp/node_modules/babel-preset-es2015']
}))

it worked for me

answered Jul 14 '16 at 10:51

Picard

3,745
3
41
50

and make sure `babel-preset-es2015` is installed by npm. – mareoraft Jun 29 '17 at 19:33

score 1 · Answer 3 · answered May 02 '16 at 16:49

1

run npm uninstall babel -g

The babel package has been deprecated and is no longer required.

answered May 02 '16 at 16:49

joemaddalone

146
2

Do you have a link for that? – kev Oct 31 '17 at 01:21

score 0 · Answer 4 · answered May 02 '16 at 15:34

0

You have to install babel-core. That's a required dependency

npm i babel-core -D

answered May 02 '16 at 15:34

thitemple

5,833
4
42
67

I already installed `babel-core`. And just to be sure, reinstalled it one more time and still have the same problem – Dmytro Medvid May 02 '16 at 15:36
It's installed globaly, or it required to be installed in the project? – Dmytro Medvid May 02 '16 at 15:39
It's required in the project. In your devDependencies. BTW, you don't need the babel presets in your dependencies, only in your devDependencies – thitemple May 02 '16 at 15:40
Thanks for advices. I have been updated my `package.json` and reinstalled whole project, but problem still there. – Dmytro Medvid May 02 '16 at 15:45

Couldn't find preset "es2015" relative to directory

4 Answers4