@loadable/component failed to asynchronously load component

🐛 Bug Report

@loadable/component raise the following exception when loading chunk.

The chunkName argument appears buggy as [undefined] while the url to the resource js is accessible.

loadable-components: failed to asynchronously load component [object Object]
logger: console
arguments: ["loadable-components: failed to asynchronously load component",{"chunkName":"[undefined]","error":"Loading chunk 31 failed.\n(error: https://static.hipacloud.com/web/0.2.610-8decb5a5/_next/static/chunks/XXXXHIDDENXXXXXX.js)","fileName":"[undefined]"}]

To Reproduce

GIVEN a user stays on page A of package version 0.0.1 AND the new package version 0.0.2 is deployed AND the old package version 0.0.1 still has all static resources accessible

WHEN he triggers a component to be mounted, which was imported via loadable() AND the chunk for this component is new in package version 0.0.2

THEN the page displays error info due to a ChunkLoadError is raised AND the sentry log points out the exception comes from loadable

Expected behavior

No matter when the dynamically component load happens, it should load a chunk correctly if its url is accessible.

Link to repl or repo (highly encouraged)

Using nextjs 10.0.3 with @loadable/component.

Run npx envinfo --system --binaries --npmPackages @loadable/component,@loadable/server,@loadable/webpack-plugin,@loadable/babel-plugin --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS 10.15.6
 - CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
 - Memory: 1.91 GB / 16.00 GB
 - Shell: 3.2.57 - /bin/bash
## Binaries:
 - Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
 - Yarn: 1.21.1 - /usr/local/bin/yarn
 - npm: 6.14.9 - ~/Works/hipa/repositories/hipa-web/node_modules/.bin/npm

[wushaobo]

For the past 12 days, crossing several releases, ChunkLoadError does not happen so far.

[don4]

My chunk is not getting loaded, what is the reason, while other chunk got loaded on same component on same page, can you please help me on that ? all are loaded success fully except AppPortals - some information regarding this - we have used React.memo inside the AppPortals - is it happening because of this ?

My code as follows const ToastContainer = loadable(() => import(“@bbb-app/core-ui/toast-message/ToastMessage”) ); const AppPortals = loadable(() => import(“@bbb-app/app-portals/AppPortals”)); —> this is not getting loaded. const Tealium = loadable(() => import(“@bbb-app/tealium/containers/Tealium”)); const GlobalNotification = loadable(() => import(“@bbb-app/global-notification/container”) ); const StickyButtons = loadable(() => import(“…/common/containers/sticky-buttons/StickyButtons”) );