Incompatibility with awilix about es5-shim HOT 17 CLOSED

Yep! jeffijoe/awilix#286

from es5-shim.

Let me build an example and get back to you.

from es5-shim.

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.

from es5-shim.

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.

from es5-shim.

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

from es5-shim.

from es5-shim.

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

from es5-shim.

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

from es5-shim.

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

from es5-shim.

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?

from es5-shim.

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.

from es5-shim.

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.

from es5-shim.

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.

from es5-shim.

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

from es5-shim.

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

from es5-shim.

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

from es5-shim.

from es5-shim.