-
-
Notifications
You must be signed in to change notification settings - Fork 380
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
undefined is not an object (evaluating 'e[t].call') #558
Comments
Hey @lluzak 👋, |
I am also facing same issue. In my case i am getting below error react-dom.production.min.js:5058 TypeError: Cannot read property 'call' of undefined
at u (bootstrap:83)
at Object.230 (ReviewCard.js:1)
at u (bootstrap:83)
at Object.234 (index.js:1)
at u (bootstrap:83)
at Module.96 (applyhomepage.4f1a6611.chunk.js:1)
at u (bootstrap:83)
at Object.e [as requireSync] (Loadable.js:9)
at o.h.loadSync (loadable.esm.js:183)
at new o (loadable.esm.js:133)` npmPackages:
|
Could you (both) clarify when the issue is happening:
And I also need an example of how you import component which is breaking - something inside
|
This bug is random in nature and whenever it occurs it occurs after loadableReady is resolved for initial page load. Scenario, /******/ function webpackJsonpCallback(data) {
/******/ var chunkIds = data[0];
/******/ var moreModules = data[1];
/******/ var executeModules = data[2];
/******/
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0, resolves = [];
/******/ for(;i < chunkIds.length; i++) {
/******/ chunkId = chunkIds[i];
/******/ if(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {
/******/ resolves.push(installedChunks[chunkId][0]);
/******/ }
/******/ installedChunks[chunkId] = 0;
/******/ }
/******/ for(moduleId in moreModules) {
/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
/******/ modules[moduleId] = moreModules[moduleId];
/******/ }
/******/ }
/******/ if(parentJsonpFunction) parentJsonpFunction(data);
/******/
/******/ while(resolves.length) {
/******/ resolves.shift()();
/******/ }
/******/
/******/ // add entry modules from loaded chunk to deferred list
/******/ deferredModules.push.apply(deferredModules, executeModules || []);
/******/
/******/ // run deferred modules when all chunks ready
/******/ return checkDeferredModules();
/******/ } function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ } which leads modules[moduleId] as undefined. P.S.: sorry for my bad English. |
Error stack trace react-lifecycles-compat.es.js:46 TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (bootstrap:86)
at Module.96 (applyhomepage.a6b11d8a.chunk.js:1241)
at __webpack_require__ (bootstrap:86)
at Object.requireSync (Loadable.js:9)
at InnerLoadable.loadSync (react-lifecycles-compat.es.js:46)
at new InnerLoadable (react-lifecycles-compat.es.js:46)
at Ug (react-lifecycles-compat.es.js:46)
at ui (react-lifecycles-compat.es.js:46)
at gk (react-lifecycles-compat.es.js:46)
at fk (react-lifecycles-compat.es.js:46) |
For me it's also happening after |
@theKashey As I am using React streaming api and loadable-components yet not support prefetching for same. Please refer below line
so because all chunks are getting loaded in |
Ok. So the root cause it that So the questions:
Webpack controls chunks execution and will not run the "main" one until it's dependencies are resolved, no matter how you do load them. 👉 try to run your code on |
correct me if I am wrong. |
I have completed all required task for migration from Early solution to this bug would be a great justification to all my work involved in migration to this library. |
@theKashey @gregberge When we are planning to get this fixed? along with this bug i am facing below bug too |
So, just to clarify:
And the solution is not to "trust" any non initial page.
|
@theKashey I am not much aware of internal working of this library. So, Please help me in understanding some of the points
|
That was just breadcrumbs for myself. The PR with the fix for the current problem has been already raised. |
Referring your previous comment Just to be on same page in term of understanding
Here main will bootup the process and then loadable-components with the help above line will be able to know page level dependencies and hold the hydration until all required chunks got loaded. This is done via below lines
before hydration everything is working fine but while hydration this error occurs and this can be occured for any page for there 1st or nth load as this bug is dynamic in nature. Below is the number of times this bug is happening for me in last 24 hours |
So, just to double check - error is happening during |
@theKashey The problem here is not with chunk loading but with module loading as each chunk can have multiple modules and the scenario i tried to explain in #558 (comment) You have mentioned in a comment module-federation/module-federation-examples#19 (comment) i.e.
I dnt know exactly how In meanwhile,I will try to apply changes of PR #568. |
Every module is brought by a some chunk. If chunk is loaded - then all modules inside it are loaded. So if just after |
But I have tried blocking one of required chunk say
|
Hi @theKashey ,
but
This |
@Joey-z-rp - look like you are close to the solution. We have just find a real root cause. Here is what not working right (as PR #568):
if (this.resolved[key] !== true) {
return false;
}
// ...
requireAsync(props) {
this.resolved[key] = false;
return this.importAsync(props).then(resolved => {
this.resolved[key] = true;
});
},
As a result the problem is hidden:
|
Yes for my case.
As per my analysis
/******/ for(moduleId in moreModules) {
/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
/******/ modules[moduleId] = moreModules[moduleId];
/******/ }
/******/ } but before that happens below line got executed for a /******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ |
@theKashey |
Ok. So component should throw if loadableReady is not finished work or was not even called. Good catch. |
Just FYI, I am using optimization: {
// Keep the runtime chunk seperated to enable long term caching
// https://twitter.com/wSokra/status/969679223278505985
runtimeChunk: true,
}, and error happens in below cases
Sample Code to Assure the order router.use("/js/page.js", (req, res, next) => {
setTimeout(next, 2000);
});
router.use("/js/vendor.js", (req, res, next) => {
setTimeout(next, 3000);
});
router.use("/js/page-dependency.js", (req, res, next) => {
setTimeout(next, 4000);
});
router.use("/js/runtime~main.js", (req, res, next) => {
setTimeout(next, 5000);
}); LOADABLE_REQUIRED_CHUNKS value <script id="__LOADABLE_REQUIRED_CHUNKS__" type="application/json">[page,page-dependency]</script> |
So there is a little problem:
Like what is So two ways to fix:
The simples solution would be to So @prateekr1 - could you share your |
@theKashey Because of my firm policy I would not be able to share stats.json but I am trying to create a sample example.
So, I feel this library intelligently populating So, here runtime has the code /******/ function webpackJsonpCallback(data) {
/******/ var chunkIds = data[0];
/******/ var moreModules = data[1];
/******/ var executeModules = data[2];
/******/
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0, resolves = [];
/******/ for(;i < chunkIds.length; i++) {
/******/ chunkId = chunkIds[i];
/******/ if(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {
/******/ resolves.push(installedChunks[chunkId][0]);
/******/ }
/******/ installedChunks[chunkId] = 0;
/******/ }
/******/ for(moduleId in moreModules) {
/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
/******/ modules[moduleId] = moreModules[moduleId];
/******/ }
/******/ }
/******/ if(parentJsonpFunction) parentJsonpFunction(data);
/******/
/******/ while(resolves.length) {
/******/ resolves.shift()();
/******/ }
/******/
/******/ // add entry modules from loaded chunk to deferred list
/******/ deferredModules.push.apply(deferredModules, executeModules || []);
/******/
/******/ // run deferred modules when all chunks ready
/******/ return checkDeferredModules();
/******/ }
function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ } Out of which below code is responsible for loading all /******/ for(moduleId in moreModules) {
/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
/******/ modules[moduleId] = moreModules[moduleId];
/******/ }
/******/ } So, particularly in below sequence as soon as
It leads to
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ and react-dom.production.min.js:5058 TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (bootstrap:84)
at Module.96 (page.js:1248)
at __webpack_require__ (bootstrap:84)
at Object.requireSync (Loadable.js:9)
at InnerLoadable.loadSync (loadable.esm.js:183)
at new InnerLoadable (loadable.esm.js:133)
at Lg (react-dom.production.min.js:3174)
at fi (react-dom.production.min.js:4307)
at Rj (react-dom.production.min.js:6700)
at Qj (react-dom.production.min.js:6150) |
Let's just answer one question - it is breaking during initial hydrating (which means |
Yes, it is breaking during initial hydration. And, It is only breaking when In webpack I use below config i.e. it create a separate chunk for runtime information in optimization: {
// Keep the runtime chunk seperated to enable long term caching
// https://twitter.com/wSokra/status/969679223278505985
runtimeChunk: true,
}, |
Ok. I'll try to update one of examples here to break them. |
After digging transpiled code via webpack. I found in // EXTERNAL MODULE: ./src/utils/validation.js
var validation = __webpack_require__(1); where so, interested to know when does webpack put
P.S.: knowledge of this may help me in creating an example for this bug. |
@theKashey can you help me with this #558 (comment). |
I am not a webpack expert. Sorry @prateekr1 |
FYI, we ran into this issue with a project that mixes SSR and pure client-side pages depending on the context (we identify the SSR scenario and use loadableReady where appropriate). For some non-SSR pages, it was in one case consistently reproducible by first doing a clear cache + reload followed by a regular reload. The latest release from master indeed seems to have fixed it. |
That's good news. Sounds like the latest master should be published to npm. |
@theKashey would be great if you release master to npm a bit more frequently. |
On it... |
🐛 Bug Report
Sentry reports error about not being able to find module. It happens for a lot of people. I am having problem with reproducing it even, because it works for me. Tried for about a hour to cause a error and it happen only once.
Error coming from here.
I checked issues and problem has been resolved in 5.11.0 release when it comes to chunks.
Any idea what could be a cause ?
Expected behavior
Should not happen.
Run
npx envinfo --system --binaries --npmPackages @loadable/component,@loadable/server,@loadable/webpack-plugin,@loadable/babel-plugin --markdown --clipboard
Paste the results here:
The text was updated successfully, but these errors were encountered: