Laravel-mix: mix.js for ES6

Created on 25 Feb 2019  路  16Comments  路  Source: JeffreyWay/laravel-mix

Hello,

By default _(for production)_, Laravel Mix converts JS to ES5. I would like to be able to manage it and turn it off as needed. Here are my files:

webpack.mix.js:

let mix = require('laravel-mix');

mix.disableNotifications();
mix.setPublicPath('./');

mix.js([
  '_dev/js/Core.js'
], 'public/dist/js/scripts.js');

_dev/js/Core.js:

class Core {

  constructor()
  {
    console.log('Hello World!');
  }

}

new Core();

package.json:

{
  "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",
    "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"
  },
  "browserslist": [
    "chrome 60",
    "firefox 55",
    "safari 11"
  ],
  "devDependencies": {
    "cross-env": "^5.2.0",
    "laravel-mix": "^1.0"
  }
}

Can I change the preset in some way? Ideally, Babel would take browserslist into consideration and convert JS based on them. For example, if I have an IE11 there is ES2015, if not ES2016.

Autoprefixer at Laravel Mix supports browserslist and works sensational!

Thank you in advance for your help!

stale
Source
picture gbiorczyk-mateusz
👀4

Most helpful comment

Dear friend, I can't talk you anymore on this topic.
I have already described everything to you.
You can ask more to the repo owner.
Or
You can dig into mix code.

Please don't mention my name here again.
Thanks

picture ankurk91 on 8 Mar 2019
👎18 😕5 🚀2

All 16 comments

Have tried to create a .babelrc file at project root?

ankurk91 picture ankurk91 on 26 Feb 2019

I tried, but it does not work:

{
  "presets": [
    ["env"]
  ]
}
gbiorczyk-mateusz picture gbiorczyk-mateusz on 26 Feb 2019

You can also specify browser target there

https://babeljs.io/docs/en/babel-preset-env#targets

ankurk91 picture ankurk91 on 26 Feb 2019
👍1

It is my current .babelrc file:

{ "presets": ["@babel/preset-env"] }

And errors in console:

C:\wamp\www\project\cms\wp-content\themes\webpack>npm run prod

> @ prod C:\wamp\www\project\cms\wp-content\themes\webpack
> npm run production


> @ production C:\wamp\www\project\cms\wp-content\themes\webpack
> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 95% emitting

 ERROR  Failed to compile with 1 errors                                                                         09:48:44
 error  in ./_dev/js/Core.js

Module build failed: Error: Couldn't find preset "@babel/preset-env" relative to directory "C:\\wamp\\www\\project\\cms\\wp-content\\themes\\webpack"
    at C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\options\option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
    at OptionManager.mergePresets (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
    at OptionManager.mergeOptions (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
    at OptionManager.init (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at File.initOptions (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\index.js:212:65)
    at new File (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\index.js:135:24)
    at Pipeline.transform (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
    at transpile (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-loader\lib\index.js:50:20)
    at C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-loader\lib\fs-cache.js:118:18
    at ReadFileContext.callback (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-loader\lib\fs-cache.js:31:21)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:441:13)

 @ multi ./_dev/js/Core.js

                     Asset     Size  Chunks             Chunk Names
\public\dist\js\scripts.js  2.52 kB       0  [emitted]  \public\dist\js\scripts

ERROR in ./_dev/js/Core.js
Module build failed: Error: Couldn't find preset "@babel/preset-env" relative to directory "C:\\wamp\\www\\project\\cms\\wp-content\\themes\\webpack"
    at C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\options\option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
    at OptionManager.mergePresets (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
    at OptionManager.mergeOptions (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
    at OptionManager.init (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at File.initOptions (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\index.js:212:65)
    at new File (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\index.js:135:24)
    at Pipeline.transform (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
    at transpile (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-loader\lib\index.js:50:20)
    at C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-loader\lib\fs-cache.js:118:18
    at ReadFileContext.callback (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-loader\lib\fs-cache.js:31:21)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:441:13)
 @ multi ./_dev/js/Core.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ production: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ production script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Crafton\AppData\Roaming\npm-cache\_logs\2019-02-26T08_48_44_830Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ prod: `npm run production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Crafton\AppData\Roaming\npm-cache\_logs\2019-02-26T08_48_44_853Z-debug.log

C:\wamp\www\project\cms\wp-content\themes\webpack>npm i --save-dev @babel/preset-env
npm WARN [email protected] requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @babel/[email protected]
added 94 packages in 12.223s

C:\wamp\www\project\cms\wp-content\themes\webpack>npm run prod

> @ prod C:\wamp\www\project\cms\wp-content\themes\webpack
> npm run production


> @ production C:\wamp\www\project\cms\wp-content\themes\webpack
> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 95% emitting

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                              09:50:03

 error  in ./_dev/js/Core.js

Module build failed: Error: Cannot find module '@babel/core' (While processing preset: "C:\\wamp\\www\\project\\cms\\wp-content\\themes\\webpack\\node_modules\\@babel\\preset-env\\lib\\index.js")
    at Function.Module._resolveFilename (module.js:543:15)
    at Function.Module._load (module.js:470:25)
    at Module.require (module.js:593:17)
    at require (internal/module.js:11:18)
    at _core (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\@babel\plugin-proposal-async-generator-functions\lib\for-await.js:9:16)
    at Object.<anonymous> (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\@babel\plugin-proposal-async-generator-functions\lib\for-await.js:18:27)
    at Module._compile (module.js:649:30)
    at Object.Module._extensions..js (module.js:660:10)
    at Module.load (module.js:561:32)
    at tryModuleLoad (module.js:501:12)
    at Function.Module._load (module.js:493:3)
    at Module.require (module.js:593:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\@babel\plugin-proposal-async-generator-functions\lib\index.js:48:40)
    at Module._compile (module.js:649:30)
    at Object.Module._extensions..js (module.js:660:10)
    at Module.load (module.js:561:32)
    at tryModuleLoad (module.js:501:12)
    at Function.Module._load (module.js:493:3)
    at Module.require (module.js:593:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\@babel\preset-env\lib\available-plugins.js:13:41)
    at Module._compile (module.js:649:30)
    at Object.Module._extensions..js (module.js:660:10)
    at Module.load (module.js:561:32)
    at tryModuleLoad (module.js:501:12)
    at Function.Module._load (module.js:493:3)
    at Module.require (module.js:593:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\@babel\preset-env\lib\index.js:38:48)

 @ multi ./_dev/js/Core.js

                     Asset     Size  Chunks             Chunk Names
\public\dist\js\scripts.js  2.69 kB       0  [emitted]  \public\dist\js\scripts

ERROR in ./_dev/js/Core.js
Module build failed: Error: Cannot find module '@babel/core' (While processing preset: "C:\\wamp\\www\\project\\cms\\wp-content\\themes\\webpack\\node_modules\\@babel\\preset-env\\lib\\index.js")
    at Function.Module._resolveFilename (module.js:543:15)
    at Function.Module._load (module.js:470:25)
    at Module.require (module.js:593:17)
    at require (internal/module.js:11:18)
    at _core (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\@babel\plugin-proposal-async-generator-functions\lib\for-await.js:9:16)
    at Object.<anonymous> (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\@babel\plugin-proposal-async-generator-functions\lib\for-await.js:18:27)
    at Module._compile (module.js:649:30)
    at Object.Module._extensions..js (module.js:660:10)
    at Module.load (module.js:561:32)
    at tryModuleLoad (module.js:501:12)
    at Function.Module._load (module.js:493:3)
    at Module.require (module.js:593:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\@babel\plugin-proposal-async-generator-functions\lib\index.js:48:40)
    at Module._compile (module.js:649:30)
    at Object.Module._extensions..js (module.js:660:10)
    at Module.load (module.js:561:32)
    at tryModuleLoad (module.js:501:12)
    at Function.Module._load (module.js:493:3)
    at Module.require (module.js:593:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\@babel\preset-env\lib\available-plugins.js:13:41)
    at Module._compile (module.js:649:30)
    at Object.Module._extensions..js (module.js:660:10)
    at Module.load (module.js:561:32)
    at tryModuleLoad (module.js:501:12)
    at Function.Module._load (module.js:493:3)
    at Module.require (module.js:593:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\@babel\preset-env\lib\index.js:38:48)
 @ multi ./_dev/js/Core.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ production: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ production script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Crafton\AppData\Roaming\npm-cache\_logs\2019-02-26T08_50_03_737Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ prod: `npm run production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Crafton\AppData\Roaming\npm-cache\_logs\2019-02-26T08_50_03_773Z-debug.log

C:\wamp\www\project\cms\wp-content\themes\webpack>npm i --save-dev @babel/core
npm WARN [email protected] requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @babel/[email protected]
added 7 packages in 9.354s

C:\wamp\www\project\cms\wp-content\themes\webpack>npm run prod

> @ prod C:\wamp\www\project\cms\wp-content\themes\webpack
> npm run production


> @ production C:\wamp\www\project\cms\wp-content\themes\webpack
> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 95% emitting

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                              09:50:34

 error  in ./_dev/js/Core.js

Module build failed: Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel. (While processing preset: "C:\\wamp\\www\\project\\cms\\wp-content\\themes\\webpack\\node_modules\\@babel\\preset-env\\lib\\index.js")
    at throwVersionError (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\@babel\helper-plugin-utils\lib\index.js:65:11)
    at Object.assertVersion (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\@babel\helper-plugin-utils\lib\index.js:13:11)
    at _default (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\@babel\preset-env\lib\index.js:154:7)
    at C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\@babel\helper-plugin-utils\lib\index.js:19:12
    at C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\options\option-manager.js:317:46
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
    at OptionManager.mergePresets (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
    at OptionManager.mergeOptions (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
    at OptionManager.init (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at File.initOptions (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\index.js:212:65)
    at new File (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\index.js:135:24)
    at Pipeline.transform (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
    at transpile (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-loader\lib\index.js:50:20)
    at C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-loader\lib\fs-cache.js:118:18
    at ReadFileContext.callback (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-loader\lib\fs-cache.js:31:21)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:441:13)

 @ multi ./_dev/js/Core.js

                     Asset     Size  Chunks             Chunk Names
\public\dist\js\scripts.js  3.45 kB       0  [emitted]  \public\dist\js\scripts

ERROR in ./_dev/js/Core.js
Module build failed: Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel. (While processing preset: "C:\\wamp\\www\\project\\cms\\wp-content\\themes\\webpack\\node_modules\\@babel\\preset-env\\lib\\index.js")
    at throwVersionError (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\@babel\helper-plugin-utils\lib\index.js:65:11)
    at Object.assertVersion (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\@babel\helper-plugin-utils\lib\index.js:13:11)
    at _default (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\@babel\preset-env\lib\index.js:154:7)
    at C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\@babel\helper-plugin-utils\lib\index.js:19:12
    at C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\options\option-manager.js:317:46
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
    at OptionManager.mergePresets (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
    at OptionManager.mergeOptions (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
    at OptionManager.init (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at File.initOptions (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\index.js:212:65)
    at new File (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\file\index.js:135:24)
    at Pipeline.transform (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
    at transpile (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-loader\lib\index.js:50:20)
    at C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-loader\lib\fs-cache.js:118:18
    at ReadFileContext.callback (C:\wamp\www\project\cms\wp-content\themes\webpack\node_modules\babel-loader\lib\fs-cache.js:31:21)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:441:13)
 @ multi ./_dev/js/Core.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ production: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ production script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Crafton\AppData\Roaming\npm-cache\_logs\2019-02-26T08_50_34_513Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ prod: `npm run production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Crafton\AppData\Roaming\npm-cache\_logs\2019-02-26T08_50_34_542Z-debug.log
gbiorczyk-mateusz picture gbiorczyk-mateusz on 26 Feb 2019

Looks like you are using older version of Mix.
Laravel Mix v3.+ is using babel 7 while older version uses babel 6

ankurk91 picture ankurk91 on 26 Feb 2019

@ankurk91 You're right. I did upgrade to version 4.0 and I have no error, but it does not take into account browserslist from package.json. I only have newer browsers, and it still converts JS to ES2015.

It is my .babelrc file:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}

How can I make it turn to ES2015 only if there is a browser that does not support ES6? I do not support IE and I want to disable converting to ES5.

gbiorczyk-mateusz picture gbiorczyk-mateusz on 26 Feb 2019

Babel won't pick browser list from package.json.
You need to specify browser target in .babelrc

ankurk91 picture ankurk91 on 27 Feb 2019

@ankurk91 Can you give me example?

gbiorczyk-mateusz picture gbiorczyk-mateusz on 27 Feb 2019

see my comment
https://github.com/JeffreyWay/laravel-mix/issues/2016#issuecomment-467335460

ankurk91 picture ankurk91 on 27 Feb 2019

@ankurk91 Thanks for your message.

It is my .babelrc file:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}

And package.json file:

{
  "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",
    "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"
  },
  "browserslist": [
    "chrome 60",
    "firefox 55"
  ],
  "devDependencies": {
    "cross-env": "^5.2.0",
    "laravel-mix": "^1.0"
  }
}

Unfortunately, she compiles to ES5 all the time. Why?

gbiorczyk-mateusz picture gbiorczyk-mateusz on 8 Mar 2019

I said you need to specify browser target in babelrc.

ankurk91 picture ankurk91 on 8 Mar 2019

@ankurk91 I would like to do this using browserslist, how can I do this?

gbiorczyk-mateusz picture gbiorczyk-mateusz on 8 Mar 2019

You can't atleast in mix.
Mix has its own Babel configs, it merge your config with its own.
So you need to pass yours in babelrc in order to override.

ankurk91 picture ankurk91 on 8 Mar 2019

@ankurk91 Can .babelrc use browserslist? Or can I configure it directly in webpack.mix.js file?

gbiorczyk-mateusz picture gbiorczyk-mateusz on 8 Mar 2019

Dear friend, I can't talk you anymore on this topic.
I have already described everything to you.
You can ask more to the repo owner.
Or
You can dig into mix code.

Please don't mention my name here again.
Thanks

ankurk91 picture ankurk91 on 8 Mar 2019
👎18 😕5 🚀2

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] picture stale[bot] on 7 May 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

hasnatbabur picture hasnatbabur  路  3Comments
sdebacker picture sdebacker  路  3Comments
amin101 picture amin101  路  3Comments
kpilard picture kpilard  路  3Comments
Micaso picture Micaso  路  3Comments