Laravel-mix: Promise not defined in IE 11

[scottgrayson]

• Laravel Mix Version: 0.8.1
• Node Version (node -v): 6.9.2
• NPM Version (npm -v): 412
• OS: Mac OS

Description:

Getting Promise is not defined in IE 11. Does babel not convert this by default? Where do i add the needed config to polyfill Promise?

[JeffreyWay]

I think you'd need the Polyfill Babel plugin for this.

https://babeljs.io/docs/usage/polyfill/

Can someone confirm this? Should we add it to Mix's .babelrc out of the box?

[scottgrayson]

Babel polyfill fixed it. I'm not using Promise myself, but its one of the packages i am importing. Mix should run on all those too right?

npm install --save babel-polyfill
then in bootstrap.js //or some main js file
import 'babel-polyfill'

[adiachenko]

Yes, you can simply include babel-polyfill, but unless you're building SPA and you don't care about the bloat of the size of another framework in your bundle, you should probably not. It's better to require the stuff you need by hand.

It may be reasonable though to provide promise polyfill and, maybe, object-assign, out of the box. For example, this is the snippet from CRA that achieves this exact thing:

if (typeof Promise === 'undefined') {
  require('promise/lib/rejection-tracking').enable();
  window.Promise = require('promise/lib/es6-extensions.js');
}

Object.assign = require('object-assign')

This example is particularly good, because it enables rejection tracking.

UPD: In short, I don't think encouraging the use of babel-polyfill is a great idea. But if you think that informing people on it would be too much of a pain, it's desirable to at least include babel-polyfill from within webpack.mix.js, so that developers can easily disable implicit behavior and fall back to a more granular approach.

[QWp6t]

fwiw I always just use https://polyfill.io/

If any polyfills are going to be added by default to laravel-mix, I'd suggest providing a way to opt out of their inclusion.

[SebastianS90]

I created a small plugin for injecting polyfills. My motivation to do so:

• I don't want to rely on an external service like polyfill.io
• I don't want to run my own polyfill-service (instead of using polyfill.io), because my production server doesn't have node installed (only php, nginx, etc.)
• Modern browsers with native support for all required features should not need to load any polyfills, i.e. don't bloat the entry chunk with a lot of superfluous code. No additional HTTP request that will load an empty file for modern browsers.
• I use webpack2 code splitting and hence cannot load the Promise polyfill using require.ensure
• The solution should be simple to integrate into my app. No manual copy-pasting of polyfills or looking around for the best choice. No need to import a whole library into your bundle with a lot of unused code.

The result is webpack-polyfill-injector. Feel free to check it out if your requirements are similar to mine.

[JeffreyWay]

Thanks, everyone. Going to close this, since there are a number of solutions it seems.

[LostKobrakai]

I had this issue even with adding babel-polyfill, because of a bug with webpack 2.6.0. Upgrading to 2.6.1 solved the issue.

[aaronhuisinga]

@SebastianS90 I know Mix isn't running on Webpack 4 yet, but is there a way to have your webpack-polyfill-injector package work with Mix for either version 1.0.2 or 2+? I started using it due to your comment here, and am still stuck on v0.0.4 due to not being able to get the later versions working with Mix.

[Ahrengot]

Just a quick update for anyone finding this issue in 2020:

as of babel 7.4.0 babel-polyfill has been deprecated in favor of core-js:

At the top of your main js file add the following:

import "core-js/features/promise";

This adds about 26kb (9kb gzipped) to yuor bundle size — or if you want the entire suite of polyfills, you can just import "core-js" but, like babel-polyfill, it's a rather large package.