"Out of stack space" error in IE 11

[Alexander-Taran]

for reference
Cli setup with webpack and babel has the same error in IE 11
as in this issue with skeletons
aurelia/skeleton-navigation#821

[maroy1986]

If I remember correctly, this error is only caused by missing Polyfills... I remember hitting this few months ago... Adding aurelia-polyfills fix it. I'm surprised the CLI doesn't include them by default.

[SetTrend]

Same issue here.

This is breaking our project.

After adding import "@babel/polyfill" to our project, IE11 reports "Out of stack space".

This is the package.json devDependencies we're using:

 "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/polyfill": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "@types/node": "^11.13.0",
    "@types/webcomponents.js": "^0.6.34",
    "@webcomponents/webcomponentsjs": "^2.2.7",
    "babel-loader": "^8.0.5",
    "class-validator": "^0.9.1",
    "clean-webpack-plugin": "^2.0.1",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "json-server": "^0.14.2",
    "lit-html": "^1.0.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "ts-loader": "^5.3.3",
    "typescript": "^3.4.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  }

Our entry file starts like this:

// Helps making custom elements compatible with IE11 and evergreen browsers.
import "@webcomponents/webcomponentsjs/webcomponents-bundle";
import "@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js";

import "@babel/polyfill"

The .babelrc file looks like this:

{
  useBuiltIns: "entry"
}

Our browserslist file looks like this:

ie 11

And the Babel part of our webpack.config.js file looks like this:

{
  test: /\.js$/i,
  include: [
    /[/\\]node_modules[/\\]lit-html[/\\]/i
    ],
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}

This is the function that's infinitely calling itself:

---

/ref: webcomponents/webcomponentsjs#972

[3cp]

Please try #1080, it should get rid of babel/polyfill and core-js related issue.

[3cp]

Currently core-js v3 is having some issue on IE. zloirock/core-js#496 (comment)

[SetTrend]

@huochunpeng:

Would you mind elaborating on the steps you want me to perform? I'm not sure I know how to integrate your PR into our project and check for the differences.

[3cp]

@SetTrend

1. Remove import '@babel/polyfill'; or import 'core-js/stable'; from your main.js or main.ts.

2. npm i -D promise-polyfill

If you use webpack, update webpack.config.js

new ProviderPlugin({
  // Add this line
  'Promise': ['promise-polyfill', 'default']
})

If you use cli built-in bundler, update aurelia.json

"prepend": [
  // Add this line before requirejs/systemjs/alameda
   "node_modules/promise-polyfill/dist/polyfill.min.js",

  "node_modules/requirejs/require.js"
]

[SetTrend]

I did as you suggested:

1. removed import '@babel/polyfill'; from my .js file.
2. installed promise-polyfill
3. added the following lines to my webpack.config.js file:

...
	plugins: [
		new cleanWP(),
		new webpack.ProvidePlugin({
			// Add this line
			'Promise': ['promise-polyfill', 'default']
		})
	]
};

Yet, the polyfills are not used then. Array.prototype.find(), for example is not available int IE11 and yields an exception.

So, unfortunately, no success, I'm afraid.

[3cp]

Yet, the polyfills are not used then. Array.prototype.find(), for example is not available int IE11 and yields an exception.

aurelia-polyfills covered it.

https://github.com/aurelia/polyfills/blob/bebda2a8b350cc2597f2f00a9662843af16aab2f/src/array.js#L49

aurelia-polyfills is loaded by aurelia-bootstrapper at first line of code.

https://github.com/aurelia/bootstrapper/blob/6b8437a8faf73b56baf6b2fdf953e73ef723760c/src/index.js#L1

What's your new error in IE11?

[3cp]

@SetTrend if you use async/await syntax with babel, you need

npm i regenerator-runtime

import 'regenerator-runtime/runtime'; // first line in main.js

This is the default offering from #1080

[SetTrend]

@huochunpeng:

I believe I made a terrible mistake here: I'm not using Aurelia. I'm using bare Babel ...

I'm wrong here, ain't I ..? 😢 😊

[3cp]

😆 however, you can use promise-polyfill + aurelia-polyfills if babel's offering does not work for you.

[ZamurVedovatto]

That solution works for me:

1. remove import 'babel-polyfill'; from main.js.

2. npm i -D promise-polyfill

3. change value from plugins on webpack.config.js.
   from
   new ProvidePlugin({
   'Promise': 'bluebird',
   to
   new ProvidePlugin({
   'Promise': ['promise-polyfill', 'default'],

4. npm i regenerator-runtime

5. import 'regenerator-runtime/runtime'; // first line in main.js

[3cp]

Latest cli does all of those. I will close this one.