laravel-mix: Couldn't find preset "es2015" relative to directory

Sorry to add to the flood of extra work, but having a weird issue adding Mix to a project

Just for clarity, this is the migration process that I followed

Updated package.json to contain


  "scripts": {
    "dev": "node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node_modules/cross-env/bin/cross-env.js NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "laravel-mix": "^0.5.3"
  }

deleted the old node_modules folder, cleared npm cache, then ran npm install

Started to update the wepack file so far got to

const { mix } = require('laravel-mix');

mix
    .js([
            // Core dependencies
            'theme-assets/frontend-core/vendor/jquery/2.1.4/jquery-2.1.4.min.js',
            'theme-assets/frontend-core/vendor/modernizr/2.8.3/modernizr.min.js',
            'theme-assets/frontend-core/vendor/underscorejs/1.8.3/underscore.min.js',
            'theme-assets/frontend-core/vendor/owlcarousel/2.0.0.2.4/owl.carousel.min.js',
            'theme-assets/frontend-core/vendor/selesti/cookielaw.js',

            // UIKit
            'theme-assets/frontend-core/vendor/uikit/2.23.0/js/uikit.js',
            'theme-assets/frontend-core/vendor/uikit/2.23.0/js/components/sticky.js',
            'theme-assets/frontend-core/vendor/uikit/2.23.0/js/components/slideshow.js',

            // AngularJS
            'theme-assets/frontend-core/vendor/angularjs/1.3.16/angular.min.js',
            'theme-assets/frontend-core/vendor/selesti/selesti-app.js'
        ]), 'public/assets/js/vendor.js');

However when I run npm run dev and webpack kicks in it comes up with

 ERROR  Failed to compile with 10 errors

 error  in ./theme-assets/frontend-core/vendor/selesti/selesti-app.js

Module build failed: Error: Couldn't find preset "es2015" relative to directory "/Users/owen"
    at /Users/owen/Sites/selesti/node_modules/babel-core/lib/transformation/file/options/option-manager.js:292:19
    at Array.map (native)
    at OptionManager.resolvePresets (/Users/owen/Sites/selesti/node_modules/babel-core/lib/transformation/file/options/option-manager.js:274:20)
    at OptionManager.mergePresets (/Users/owen/Sites/selesti/node_modules/babel-core/lib/transformation/file/options/option-manager.js:263:10)
    at OptionManager.mergeOptions (/Users/owen/Sites/selesti/node_modules/babel-core/lib/transformation/file/options/option-manager.js:248:14)
    at OptionManager.init (/Users/owen/Sites/selesti/node_modules/babel-core/lib/transformation/file/options/option-manager.js:367:12)
    at File.initOptions (/Users/owen/Sites/selesti/node_modules/babel-core/lib/transformation/file/index.js:216:65)
    at new File (/Users/owen/Sites/selesti/node_modules/babel-core/lib/transformation/file/index.js:139:24)
    at Pipeline.transform (/Users/owen/Sites/selesti/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/Users/owen/Sites/selesti/node_modules/babel-loader/lib/index.js:38:20)
    at /Users/owen/Sites/selesti/node_modules/babel-loader/lib/fs-cache.js:78:18
    at ReadFileContext.callback (/Users/owen/Sites/selesti/node_modules/babel-loader/lib/fs-cache.js:14:14)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:365:13)

I’ve checked my node_modules folder and can see that the preset is included.

However for some odd reasons these are not playing ball.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 25 (3 by maintainers)

Most upvoted comments

I was having the same problem.

Node version: v7.8.0 (based on node -v)
NPM version: 4.5.0 (based on npm -v)
Laravel Mix version: 0.11.3 (based on npm ls laravel-mix)
Laravel version: v5.4.19 (based on composer show laravel/framework)

.babelrc file were not in the root directory after npm install. I was having problems with async, await, and other stuff. I have created the .babelrc file and started getting “Couldn’t find preset “es2015” relative to directory” during npm run dev.

This StackOverflow answer suggest to check if babel-preset-es2015 is installed. When I have executed npm ls babel-preset-es2015, nothing was returned.

npm install babel-preset-es2015 --save-dev solved my problem.

+50

gerardojbaez on Apr 23, 2017

Noticed if you add your own .babelrc file with

{
    "presets": [
        ["es2015", { "modules": false }]
    ]
}

it solves the issue.

+22

OwenMelbz on Jan 25, 2017

in .babelrc add:

{ "presets": [["env", {"modules": false}]] }

I have added comment because I had this problem last one hour and found that using ‘es2015’ deprecated and should use ‘env’

negarineh on May 25, 2018

@JeffreyWay I can confirm the issue that I had to add a .babelrc to my project root on a brand spanking new install of Laravel 5.4.6. I added this to .babelrc:

{
    "presets": [
        ["es2015", { "modules": false }]
    ]
}

Everything worked fine after that.

ejdelmonico on Jan 28, 2017

@JeffreyWay The only thing I could figure out is that for some reason the path is not being appended properly when no .babelrc is present. Even directly injecting the string did not produce any detectable result. However, I did come up with a work around until I have more time to investigate. All I did was change the babelConfig() slightly to produce a .babelrc file if none is present.

/**
     * Fetch the appropriate Babel config for babel-loader.
     */
    babelConfig() {
        let file = this.Paths.root('.babelrc');

        // If the user has defined their own .babelrc file,
        // the babel-loader will automatically fetch it.
        // Otherwise, we'll use these defaults.
        // return this.File.exists(file) ? '?cacheDirectory' : '?' +
JSON.stringify({
        //     'cacheDirectory': true,
        //     'presets': [
        //         ['es2015', { 'modules': false }]
        //     ]
        // });
        //
        let root = path.resolve(this.Paths.rootPath);
        let babelConfig = new File(root +
'/.babelrc').write(JSON.stringify({ "presets": [["es2015", { "modules":
false }]] }));
        return this.File.exists(file) ? '?cacheDirectory' : babelConfig;
    }

Or, you can add this to package.json and forget creating a new .babelrc:

"babel": {
    "presets": [
      "es2015"
    ]
  },

On Fri, Feb 3, 2017 at 11:46 AM, Jeffrey Way notifications@github.com wrote:

If any of you guys want to do some digging to figure out why it’s not referencing our default Babel config, here’s the code that performs the check.

https://github.com/JeffreyWay/laravel-mix/blob/master/src/Mix.js#L145-L157

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/JeffreyWay/laravel-mix/issues/158#issuecomment-277343919, or mute the thread https://github.com/notifications/unsubscribe-auth/ABvxshIKiMsEMuJdzTy74PuRB0FWeUiaks5rY4QPgaJpZM4LtUaf .

–

Ed ejdelmonico@gmail.com (702) 510-8380

ejdelmonico on Feb 8, 2017

It should automatically apply that .babelrc config if you don’t have one in your project root.

JeffreyWay on Jan 25, 2017