Laravel Mix: Configure Babel for IE11 compatibility (transformations and polyfills)
Enable Babel compilation with Laravel Mix, and use polyfills for internet explorer
Step 1: Install Corejs to get polyfills
Following the Babeljs docs for babel-preset-env
2, we first need to install core-js (which contains the polyfills):
$ npm install core-js@3 --save
Step 2: Configure .babelrc
create a .babelrc
file in the project root:
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": {
"version": 3,
"proposals": false
},
"targets": {
"ie": "11"
}
}
]
]
}
Now run npm run dev
and you will find polyfills inserted, arrow functions compiled out etc. - your code may just run on IE11!
Laravel-Mix, Babel, IE: Some gotchas
node_modules are not processed through babel
With the default configuration, only source code in the project itself - not its dependencies - runs through the babel compilation step. This means that any let
or similar in the dependencies will trip up legacy browsers 3.
using `mix.babel' risks compiling a file twice
The laravel mix docs suggest using the mix.babel
function in the Vanilla JS section 1. What this appears to do:
- if no
.babelrc
is present, the specified file is run through babel. - if a
.babelrc
is present, the normal mix compilation step already uses babel. Usingmix.babel
causes the compilation step to be run twice.
Interestingly, the twice-compiled code does not run on IE. One problem is that it will contain require() calls for polyfills that cannot be handled:
SCRIPT5009: 'require' is undefined
Related videos on Youtube
flexponsive
Updated on June 04, 2022Comments
-
flexponsive almost 2 years
In a Laravel 6 application with Laravel-Mix 4, and using the Vue preset, I need to compile my JavaScript code to be compatible for IE11. This means adding any polyfills for missing functions, compiling out arrow functions, and so on. Out of the box, this is not done.
My test code in
resources/js/app.js
://require('./bootstrap'); let test = [1, 2, [3, 4]]; console.log( test.flat().map((x) => 2*x) );
With default config, laravel mix does not appear to compile JavaScript code, but only do some formatting. Comments are preserved in the compiled output.
The result of
npm run dev
is:Asset Size Chunks Chunk Names /css/app.css 0 bytes /js/app [emitted] /js/app /js/app.js 4.95 KiB /js/app [emitted] /js/app
How do I get Laravel-Mix to use Babel to create IE11-compatible source code?
-
DAVID AJAYI almost 4 yearsYour solution is not working for me. I cannot notice any difference! But the I did proceed to using mix.babel which you disagreed with and indeed I got the error SCRIPT5009: 'require' is undefined. This is just a proof that I followed your instructions correctly and without any doubt, your solution does NOT work. I should down-vote your answer so you don't waste others time but I will await 1 or 2 confirmation of what I have noticed.
-
Plokko about 3 yearsNote: even if your solution is correct it never works with Laravel Mix in my experience; even if it's processed it just do otherwise. The best way to make it work as intended is to use this Laravel Mix extension laravel-mix.com/extensions/polyfill instead of the standard babelrc