loadable-components: undefined is not an object (evaluating 'e[t].call')

Hi @theKashey , I’m experiencing a similar issue. Say a particular page on our site (SSR) needs 4 chunks: main.js, vendor.js, page.js, page-dependency.js. page-dependency.js normally loads before vendor.js and everything is fine. If for some reason page-dependency.js loads after vendor.js, it will throw TypeError: Cannot read property ‘call’ of undefined. So the following loading orders are fine: main.js -> page.js -> page-dependency.js -> vendor.js main.js -> page-dependency.js -> page.js -> vendor.js page-dependency.js -> page.js -> main.js -> vendor.js and these will error: main.js -> page.js -> vendor.js -> page-dependency.js page.js -> main.js -> vendor.js -> page-dependency.js After investigation I found the cause: main.js waits until vendor.js is loaded and executes, which executes page.js. However the dependency (page-dependency.js) for page.js is not ready at the moment, causing the type error - it tries to run

modules[moduleId].call(module.exports,` module, module.exports, __webpack_require__);

but modules[moduleId] is undefined (not loaded yet). Further investigation found this is because loadable component checks options.ssr !== false && ctor.isReady && ctor.isReady(props) and isReady returns true because it checks:

if (typeof __webpack_modules__ !== 'undefined') {
      return !!(__webpack_modules__[key])
}

This key here is the moduleId for one of the modules in page.js and it will exist in __webpack_modules__ because page.js is loaded. However it doesn’t mean that page.js is safe to execute because page-dependency.js is not loaded yet. isReady gives false positive to loadable to use loadSync. It only checks whether the module itself is loaded but misses its dependencies. I read your PR https://github.com/gregberge/loadable-components/pull/568. From my limited understanding of loadable library, I’m not sure if it will solve the issue in the above case: isReady will still return true in our case. Also LOADABLE_SHARED.initialChunks[ctor.chunkName(props)] will be true because page.js is loaded from SSR process. So loadSync will still be called causing the type error. Although not very frequent, this bug is causing production issue for our app. We would really appreciate it if the bug can be fixed soon. I can put up a sample project if the information is not enough. Thanks a lot.

So, just to clarify:

• there are a few chunks - main, page1, page2, somestuff, someotherstuff
• you can load page1, it will also load, page2 and somestuff
• then you will try to load page2, it will be in the cache, so loadable will try to load it, but not all dependencies would be “ready”
• 💥

And the solution is not to “trust” any non initial page. Sounds like a small change to isReady - it should bailout for:

• all this.resolved[key] === false before LoadableReady event (as right now)
• all this.resolved[key] !== true after LoadableReady event (should fix this case)

@theKashey would be great if you release master to npm a bit more frequently. I like the fact that loadable-components is stable, but last release was in January and it misses a lot of fixes.

Ok. I’ll try to update one of examples here to break them.

That was just breadcrumbs for myself. The PR with the fix for the current problem has been already raised.