Laravel Mix Babel error: UnhandledPromiseRejectionWarning: Error: [BABEL] unknown: Preset

  babeljs, javascript, laravel, laravel-mix, vue.js

I have an error when running npm run dev. How do I use Laravel Mix with Vue.js 2 to use Babel to create IE11 compatible source code?

(node:11915) UnhandledPromiseRejectionWarning: Error: [BABEL] unknown:
Preset /* your preset */ requires a filename to be set when babel is
called directly,

babel.transform(code, { filename: ‘file.ts’, presets: [/* your preset
*/] });

See https://babeljs.io/docs/en/options#filename for more information.
at validateIfOptionNeedsFilename (/Users/vajasinauridze/PhpstormProjects/fox/node_modules/@babel/core/lib/config/full.js:295:11)
(node:11915) UnhandledPromiseRejectionWarning: Unhandled promise
rejection. This error originated either by throwing inside of an async
function without a catch block, or by rejecting a promise which was
not handled with .catch(). To terminate the node process on unhandled
promise rejection, use the CLI flag --unhandled-rejections=strict
(see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode).
(rejection id: 1)

webpack.min.js

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

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .babel(['public/js/app.js'], 'public/js/app.es5.js')
    .sass('resources/sass/app.scss', 'public/css');

babel.config.js

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

app.js

require('./bootstrap');
import "core-js";
import "@babel/polyfill";
window.Vue = require('vue').default;

package.json

"babel/polyfill": "^7.12.1",
"add": "^2.0.6",
"babel-core": "^6.26.3",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"core-js": "^3.6.5",

Source: Laravel

Leave a Reply