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

[OwenMelbz]

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.

[InterStelios]

Make sure you update npm and node to the latest versions. Here are the versions that I use and they work:

[email protected]
[email protected]

[OwenMelbz]

Currently using slightly newer versions.

npm - 3.10.8
node - 6.9.4

Its worth noting it works on a clean laravel 5.4 project

[OwenMelbz]

In fact, I've just tried on another project and getting the same issue.

ERROR  Failed to compile with 2 errors

 error  in ./resources/assets/js/app.js

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

 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss ./resources/assets/sass/admin.scss

this is the app.js

require('./bootstrap');

/**
 * Next, you'll be able to start including your application specific functionality
 */

window.App = App = angular.module('App', ['ngAnimate'], ['$interpolateProvider', function($interpolateProvider) {
    // Tell angular to use different templating tags
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');
}]);

// Filters

// Directives
require('./directives/FancyFormLabel');
require('./directives/DateDropper');
require('./directives/ProgressCircle');

// Services
require('./services/MenuService');

// Controllers
require('./controllers/GlobalController');
require('./controllers/QuestionController');

this is the other package.json

{
  "private": true,
  "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.0"
  },
  "dependencies": {
    "angular": "^1.6.0",
    "angular-animate": "^1.6.0",
    "animate.css": "^3.5.2",
    "datedropper": "^2.0.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.1.1",
    "progressbar.js": "^1.0.1",
    "responsive-iframe": "^0.0.1",
    "selesti-blockui": "^1.0.0",
    "uikit": "^2.27.2"
  },
  "sasslintConfig": "./.sass-lint.yml",
  "eslintConfig": "./.eslintrc.yml"
}

[OwenMelbz]

Noticed if you add your own .babelrc file with

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

it solves the issue.

[JeffreyWay]

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

[OwenMelbz]

@JeffreyWay I did not have the .babelrc - I didnt need one as it was just old school js.

Thus it was generating the automated one from within Mix.js

However once I added my own one (I actually just copy/pasted it from the js file) it then started working.

Its almost like its not picking up the root correctly when using the automatic generated one.

I've tried it using bash, sh, zsh and fsh just incase it was any bash settings cocking up the paths - and they all produce the same result.

I'm happy to provide you with an other information that might help resolve the issue which might be affecting other users if you need.

[ejdelmonico]

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

[JeffreyWay]

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

I can't reproduce this. I've never had to manually create the file.

[ejdelmonico]

@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 [e-mail]
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
[email protected]
[phone]

[Blizzke]

For me it manifested differently: I could actually compile without error, but when I ran the application, it showed that exact error in the browser console. After upgrading to the most recent versions of node & npm (and recompiling) it seems to work now. Weird.

npm - 4.1.2
node - 7.7.4

[JeffreyWay]

I don't think this is relevant anymore, after the latest update. So closing.

[gerardojbaez]

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.

[ruchern-chong]

@gerardojbaez Actually you do not have to install any babel packages as it should have been in Laravel-Mix already.

I had the same problem as you just 2 days ago, what I did was to delete the whole node_modules folder and do a npm install again. I got it working again without adding that package and .babelrc

Since Laravel Framework comes by default without .babelrc, I tried to solve the problem without adding the file making the directory look pretty much about the same as default.

[OwenMelbz]

The key word being "should"

But I can also confirm this has happened several times on different computers. Sometimes it just doesn't. And the only way to start getting it to work is by manually installing the presets then adding a .babelrc

We're all aware that you SHOULDNT need to do this. But that's why it's being bought up as a bug - because it's not working as it SHOULD

[ruchern-chong]

@OwenMelbz Okay I understood your point here, but my solution serves an alternative for whoever that has the same problem but does not want to manually create the .babelrc file.

We'll wait and see what @JeffreyWay says, regarding this.

[gerardojbaez]

@ruchern I have tried that without success.

@OwenMelbz You're completely right.

[briancullinan]

I am still getting this error in WebStorm. Why does everyone think that a "workaround" is a proper fix for a horrible user experience?

[ejdelmonico]

@megamindbrian I do not at all believe that everyone feels a work around is the answer. It is represented as a quick solution to a nagging issue with npm installs. The problem stems from npm or yarn does not install all packages properly and the most common issue is "Couldn't find preset "es2015" relative to directory". I have had to nuke the node_modules directory several times to get all the packages installed properly so that Mix will work. For this reason, and type of reason, people tend to comment the quick fix because it is the simple way. If you have a solution, please feel free to submit a pull request to Jeffrey. I am sure he will look closely at it.

[ruchern-chong]

@ejdelmonico I remembered Jeffery did ask users to nuke node_modules and reinstall Laravel-mix again for this particular issue with Babel. He never had a problem where he needed to create .babelrc file in order to work.

[MicroDreamIT]

May be I can not figure out the process step by step, I am seeking help for couple of weeks. I will be very much grateful to you if you could assist me solving this issue.

I am using Shapecss.

The error is showing for npm run production. But other command is working well.

/js/app.js from UglifyJs
Unexpected token: name (Accordion) [./~/shapecss/resources/assets/js/component/Accordion.js:1,0][/js/app.js:31660,6]

1. My package.json file is look like

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.3",
    "jquery": "^3.1.1",
    "laravel-mix": "0.*",
    "lodash": "^4.17.4",
    "uglify-js": "git://github.com/mishoo/UglifyJS2#harmony-v2.8.22",
    "vue": "^2.1.10"
  },
  "dependencies": {
    "babel-preset-latest": "^6.24.1",
    "shapecss": "^2.1.3"
  }
}

.....................................................................................

1. I have created .babelrc on project root

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
    "plugins": ["transform-object-rest-spread"]
}

.....................................................................................

Any help can save my life... :)

[ashokgelal]

Just ran into the same problem. This is what worked for me: https://stackoverflow.com/a/36821986/33203

[briancullinan]

@ashokgelal Was that a response to @MicroDreamIT ? It looks like /assets/js/ is something included after compilation is already finished. Is assets is already packed and ready, it should be excluded from the compile step using webpack's exclude pattern matching.

[briancullinan]

@JeffreyWay I was more referring to the fact that the issue was closed without continuation or path to resolve the issue in a new thread.

[MicroDreamIT]

@megamindbrian here is ref, https://github.com/MicroDreamIT/shapecss-framework/issues/2

[negarineh]

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'