Sunday, March 14, 2021

Laravel Mix: Configure Babel for IE11 compatibility (transformations and polyfills)

So, basically the problem is with laravel mix (integration between laravel and reactjs) that compiled code of reacjs does not run in ie11 browser. Laravel mix has some gotchas so that ie11 can't run them properly. At this we need go apply some polyfills so that our laravel mix code run on ie11 browser without any issues.
So after google what I did to my project is (a) I installed npm install core-js@3 --save core-js3 into my application. After core-js3 installation done into my application, I created a file named .babelrc file inside my root application as followes

with following content in it:
{
  "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!
I had another problem after above process completed, its said SCRIPT438: Object doesn't support property or method 'assign'
Same process, after did some googling, I added below javascript link in my project and it's working fine till now:

<script src="https://cdn.jsdelivr.net/npm/es6-object-assign@1.1.0/dist/object-assign-auto.min.js">