Incompatibility with awilix

[sobrinho]

Not sure how to investigate yet but adding the es5-shim breaks our app.

Removing it, it works again just fine.

The main issue here is that our client is using a widget from another vendor that includes the ES5 Shim, so, not easy just to ask to remove the widget or ask the vendor to do some fix.

But we are willing to fix that in our side, probably something is leaking into the browser and breaking it.

Any idea where to start?

[sobrinho]

Pinned the issue to spreading an object that without es5-shim does work.

[ljharb]

Hmm - the “could not resolve” error doesn’t seem like it’s coming from es5-shim. What are you using to transpile object spread?

[sobrinho]

The app was created with vue-cli. What info do you need?

[ljharb]

I'm not familiar with vue projects. Do you get that error when running eslint, or when bundling (with webpack, i presume?), or at runtime?

[sobrinho]

Let me build an example and get back to you.

[sobrinho]

https://github.com/sobrinho/es5-shim-480

You can run yarn run serve and access localhost:8080 and open the inspector.

If you remove the es5-shim from the public/index.html, it works just fine.

It is all standard files generated by npx @vue-cli create example and selected Vue2 and JS, added awilix, created a dummy container and then added es5-shim.

I don't think it is related to the Vue or Awilix itself, it is about something that Awilix is doing and Babel is trying to compile.

[ljharb]

Note that this app crashes immediately in Safari, because Error.captureStackTrace is a nonstandard chrome-only API.

I can definitely reproduce this in Chrome, and will continue to look into the error. It's also possible it's coming from webpack 5, and I've asked them about it as well.

[ljharb]

ok, so there's a few issues. For one, you're using an out of date version of es5-shim, plus you're pulling it off a CDN instead of bundling it.

Second, the app is already using core-js, and while core-js should work fine in concert with es-shims, you shouldn't need both - i believe core-js provides everything es5-shim does.

Third, es5-shim isn't meant to be used alone; it's meant to be used in concert with the es6-shim - but adding that to the HTML file doesn't fix it.

The actual problem is caused by something doing require(Symbol.toStringTag), but i'm not sure why it would be doing that. The exception is thrown when __webpack_require__ is called, trying to load babel-loader. I'm also not sure why babel would be running in the browser at all - but awilix is requiring it, it seems (i'd file an issue about that; babel's not meant to be used in the browser).

I suspect the problem is that one of the methods es5-shim patches is producing a Symbol, and some code inside babel-loader - or that babel-loader is processing - may not be expecting that.

[ljharb]

This is a reduction of the eval'd code inside the webpack bundle that's throwing:

__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _pwd_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/objectSpread2.js */ \"./node_modules/@babel/runtime/helpers/esm/objectSpread2.js\");
/* harmony import */ var core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core-js/modules/es.object.keys.js */ \"./node_modules/core-js/modules/es.object.keys.js\");
/* harmony import */ var core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var awilix__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! awilix */ \"./node_modules/awilix/lib/awilix.browser.js\");



var container = (0,awilix__WEBPACK_IMPORTED_MODULE_2__.createContainer)();
container.register({
  container: (0,awilix__WEBPACK_IMPORTED_MODULE_2__.asValue)(\"dummy\")
});
var cradle = container.cradle;

var expanded = (0,_pwd_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"])({}, cradle);

console.log(Object.keys(cradle));
console.log(Object.keys(expanded));
/* harmony default export */ __webpack_exports__[\"default\"] = ({
  name: 'HelloWorld',
  props: {
    msg: String
  }
});//# sourceURL=[module]

which strongly suggests it's something inside awilix that's throwing the error. Given that its purpose is to do dynamic DI (an unidiomatic thing in JS), this would be unsurprising.

[sobrinho]

Third, es5-shim isn't meant to be used alone; it's meant to be used in concert with the es6-shim - but adding that to the HTML file doesn't fix it.

The problem is that we don't control where our widget is used.

So, a customer have the es5-shim in their website and the widget does not work there.

[ljharb]

thanks, that's useful context. the customer is the one using awilix?

[sobrinho]

Nope, I am the one using it. The customer is the one using es5-shim in their website.

[ljharb]

Have you filed this with awilix? Their code looks pretty complex, so they can probably find their dynamic requires faster than i can.

[sobrinho]

Yep! jeffijoe/awilix#286

[ljharb]

Looks like jeffijoe/awilix#287 will fix it, so I'll close this :-)