Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

loadable/component - loadableReady doesn't work on webpack 5

See original GitHub issue

🐛 Bug Report

Method loadableReady throws errors on every version of Webpack 5. The same code and config works on Webpack 4.

On client side:

import React from 'react';
import { hydrate } from 'react-dom';
import { loadableReady } from '@loadable/component';

loadableReady().then(() => {
  hydrate(<App />, document.getElementById('app'));
});

It throws

loadable-components: failed to synchronously load component, which expected to be available {fileName: "../ui/src/views/history/index.tsx", chunkName: "history", error: "Cannot read property 'call' of undefined"}

and

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `InnerLoadable`.
    at InnerLoadable (eval at ES6ProxyComponentFactory (webpack-internal:///../../node_modules/react-hot-loader/dist/react-hot-loader.development.js), <anonymous>:14:7)
    at Route (eval at ES6ProxyComponentFactory (webpack-internal:///../../node_modules/react-hot-loader/dist/react-hot-loader.development.js), <anonymous>:14:7)
    at Switch (eval at ES6ProxyComponentFactory (webpack-internal:///../../node_modules/react-hot-loader/dist/react-hot-loader.development.js), <anonymous>:14:7)
    at _default
    at Router (eval at ES6ProxyComponentFactory (webpack-internal:///../../node_modules/react-hot-loader/dist/react-hot-loader.development.js), <anonymous>:14:7)
    at BrowserRouter (eval at ES6ProxyComponentFactory (webpack-internal:///../../node_modules/react-hot-loader/dist/react-hot-loader.development.js), <anonymous>:14:7)
    at AppContainer (eval at ES6ProxyComponentFactory (webpack-internal:///../../node_modules/react-hot-loader/dist/react-hot-loader.development.js), <anonymous>:14:7)
    at HotExportedComponent (eval at ES6ProxyComponentFactory (webpack-internal:///../../node_modules/react-hot-loader/dist/react-hot-loader.development.js), <anonymous>:14:7)
printWarning @ react.development.js?732b:220
error @ react.development.js?732b:196
createElementWithValidation @ react.development.js?732b:2215
React$$1.createElement @ react-hot-loader.development.js?4e17:2915
render @ loadable.esm.js?f82a:435
render @ loadable.esm.js?f82a:378
finishClassComponent @ react-dom.development.js?ef6f:17478
updateClassComponent @ react-dom.development.js?ef6f:17428
beginWork @ react-dom.development.js?ef6f:19066
callCallback @ react-dom.development.js?ef6f:3946
invokeGuardedCallbackDev @ react-dom.development.js?ef6f:3995
invokeGuardedCallback @ react-dom.development.js?ef6f:4057
beginWork$1 @ react-dom.development.js?ef6f:23957
performUnitOfWork @ react-dom.development.js?ef6f:22772
workLoopSync @ react-dom.development.js?ef6f:22700
renderRootSync @ react-dom.development.js?ef6f:22663
performSyncWorkOnRoot @ react-dom.development.js?ef6f:22286
scheduleUpdateOnFiber @ react-dom.development.js?ef6f:21874
updateContainer @ react-dom.development.js?ef6f:25475
eval @ react-dom.development.js?ef6f:26014
unbatchedUpdates @ react-dom.development.js?ef6f:22424
legacyRenderSubtreeIntoContainer @ react-dom.development.js?ef6f:26013
hydrate @ react-dom.development.js?ef6f:26079
eval @ index.tsx?d986:21
Promise.then (async)
eval @ index.tsx?d986:9
./src/index.tsx @ main.js:189
__webpack_require__ @ main.js:1387
(anonymous) @ main.js:2502
(anonymous) @ main.js:2506
react-dom.development.js?ef6f:25051 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `InnerLoadable`.
    at createFiberFromTypeAndProps (react-dom.development.js?ef6f:25051)
    at createFiberFromElement (react-dom.development.js?ef6f:25079)
    at reconcileSingleElement (react-dom.development.js?ef6f:14045)
    at reconcileChildFibers (react-dom.development.js?ef6f:14105)
    at reconcileChildren (react-dom.development.js?ef6f:16983)
    at finishClassComponent (react-dom.development.js?ef6f:17504)
    at updateClassComponent (react-dom.development.js?ef6f:17428)
    at beginWork (react-dom.development.js?ef6f:19066)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ef6f:3946)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ef6f:3995)
createFiberFromTypeAndProps @ react-dom.development.js?ef6f:25051
createFiberFromElement @ react-dom.development.js?ef6f:25079
reconcileSingleElement @ react-dom.development.js?ef6f:14045
reconcileChildFibers @ react-dom.development.js?ef6f:14105
reconcileChildren @ react-dom.development.js?ef6f:16983
finishClassComponent @ react-dom.development.js?ef6f:17504
updateClassComponent @ react-dom.development.js?ef6f:17428
beginWork @ react-dom.development.js?ef6f:19066
callCallback @ react-dom.development.js?ef6f:3946
invokeGuardedCallbackDev @ react-dom.development.js?ef6f:3995
invokeGuardedCallback @ react-dom.development.js?ef6f:4057
beginWork$1 @ react-dom.development.js?ef6f:23957
performUnitOfWork @ react-dom.development.js?ef6f:22772
workLoopSync @ react-dom.development.js?ef6f:22700
renderRootSync @ react-dom.development.js?ef6f:22663
performSyncWorkOnRoot @ react-dom.development.js?ef6f:22286
scheduleUpdateOnFiber @ react-dom.development.js?ef6f:21874
updateContainer @ react-dom.development.js?ef6f:25475
eval @ react-dom.development.js?ef6f:26014
unbatchedUpdates @ react-dom.development.js?ef6f:22424
legacyRenderSubtreeIntoContainer @ react-dom.development.js?ef6f:26013
hydrate @ react-dom.development.js?ef6f:26079
eval @ index.tsx?d986:21
Promise.then (async)
eval @ index.tsx?d986:9
./src/index.tsx @ main.js:189
__webpack_require__ @ main.js:1387
(anonymous) @ main.js:2502
(anonymous) @ main.js:2506
react-dom.development.js?ef6f:68 Warning: Did not expect server HTML to contain a <style> in <main>.
printWarning @ react-dom.development.js?ef6f:68
error @ react-dom.development.js?ef6f:44
warnForDeletedHydratableElement @ react-dom.development.js?ef6f:9704
didNotHydrateContainerInstance @ react-dom.development.js?ef6f:10478
deleteHydratableInstance @ react-dom.development.js?ef6f:14441
popHydrationState @ react-dom.development.js?ef6f:14709
completeWork @ react-dom.development.js?ef6f:19398
completeUnitOfWork @ react-dom.development.js?ef6f:22805
performUnitOfWork @ react-dom.development.js?ef6f:22780
workLoopSync @ react-dom.development.js?ef6f:22700
renderRootSync @ react-dom.development.js?ef6f:22663
performSyncWorkOnRoot @ react-dom.development.js?ef6f:22286
scheduleUpdateOnFiber @ react-dom.development.js?ef6f:21874
updateContainer @ react-dom.development.js?ef6f:25475
eval @ react-dom.development.js?ef6f:26014
unbatchedUpdates @ react-dom.development.js?ef6f:22424
legacyRenderSubtreeIntoContainer @ react-dom.development.js?ef6f:26013
hydrate @ react-dom.development.js?ef6f:26079
eval @ index.tsx?d986:21
Promise.then (async)
eval @ index.tsx?d986:9
./src/index.tsx @ main.js:189
__webpack_require__ @ main.js:1387
(anonymous) @ main.js:2502
(anonymous) @ main.js:2506
react-dom.development.js?ef6f:20078 The above error occurred in the <InnerLoadable> component:

    at InnerLoadable (eval at ES6ProxyComponentFactory (webpack-internal:///../../node_modules/react-hot-loader/dist/react-hot-loader.development.js), <anonymous>:14:7)
    at Route (eval at ES6ProxyComponentFactory (webpack-internal:///../../node_modules/react-hot-loader/dist/react-hot-loader.development.js), <anonymous>:14:7)
    at Switch (eval at ES6ProxyComponentFactory (webpack-internal:///../../node_modules/react-hot-loader/dist/react-hot-loader.development.js), <anonymous>:14:7)
    at _default
    at Router (eval at ES6ProxyComponentFactory (webpack-internal:///../../node_modules/react-hot-loader/dist/react-hot-loader.development.js), <anonymous>:14:7)
    at BrowserRouter (eval at ES6ProxyComponentFactory (webpack-internal:///../../node_modules/react-hot-loader/dist/react-hot-loader.development.js), <anonymous>:14:7)
    at AppContainer (eval at ES6ProxyComponentFactory (webpack-internal:///../../node_modules/react-hot-loader/dist/react-hot-loader.development.js), <anonymous>:14:7)
    at HotExportedComponent (eval at ES6ProxyComponentFactory (webpack-internal:///../../node_modules/react-hot-loader/dist/react-hot-loader.development.js), <anonymous>:14:7)

React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.
logCapturedError @ react-dom.development.js?ef6f:20078
callback @ react-dom.development.js?ef6f:20147
callCallback @ react-dom.development.js?ef6f:12311
commitUpdateQueue @ react-dom.development.js?ef6f:12332
commitLifeCycles @ react-dom.development.js?ef6f:20702
commitLayoutEffects @ react-dom.development.js?ef6f:23419
callCallback @ react-dom.development.js?ef6f:3946
invokeGuardedCallbackDev @ react-dom.development.js?ef6f:3995
invokeGuardedCallback @ react-dom.development.js?ef6f:4057
commitRootImpl @ react-dom.development.js?ef6f:23144
unstable_runWithPriority @ scheduler.development.js?e22e:646
runWithPriority$1 @ react-dom.development.js?ef6f:11269
commitRoot @ react-dom.development.js?ef6f:22983
performSyncWorkOnRoot @ react-dom.development.js?ef6f:22322
scheduleUpdateOnFiber @ react-dom.development.js?ef6f:21874
updateContainer @ react-dom.development.js?ef6f:25475
eval @ react-dom.development.js?ef6f:26014
unbatchedUpdates @ react-dom.development.js?ef6f:22424
legacyRenderSubtreeIntoContainer @ react-dom.development.js?ef6f:26013
hydrate @ react-dom.development.js?ef6f:26079
eval @ index.tsx?d986:21
Promise.then (async)
eval @ index.tsx?d986:9
./src/index.tsx @ main.js:189
__webpack_require__ @ main.js:1387
(anonymous) @ main.js:2502
(anonymous) @ main.js:2506
react-hot-loader.development.js?4e17:297 Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `InnerLoadable`.
    at createFiberFromTypeAndProps (react-dom.development.js?ef6f:25051)
    at createFiberFromElement (react-dom.development.js?ef6f:25079)
    at reconcileSingleElement (react-dom.development.js?ef6f:14045)
    at reconcileChildFibers (react-dom.development.js?ef6f:14105)
    at reconcileChildren (react-dom.development.js?ef6f:16983)
    at finishClassComponent (react-dom.development.js?ef6f:17504)
    at updateClassComponent (react-dom.development.js?ef6f:17428)
    at beginWork (react-dom.development.js?ef6f:19066)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ef6f:3946)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ef6f:3995)
error @ react-hot-loader.development.js?4e17:297
componentDidCatch @ react-hot-loader.development.js?4e17:2402
callback @ react-dom.development.js?ef6f:20152
callCallback @ react-dom.development.js?ef6f:12311
commitUpdateQueue @ react-dom.development.js?ef6f:12332
commitLifeCycles @ react-dom.development.js?ef6f:20702
commitLayoutEffects @ react-dom.development.js?ef6f:23419
callCallback @ react-dom.development.js?ef6f:3946
invokeGuardedCallbackDev @ react-dom.development.js?ef6f:3995
invokeGuardedCallback @ react-dom.development.js?ef6f:4057
commitRootImpl @ react-dom.development.js?ef6f:23144
unstable_runWithPriority @ scheduler.development.js?e22e:646
runWithPriority$1 @ react-dom.development.js?ef6f:11269
commitRoot @ react-dom.development.js?ef6f:22983
performSyncWorkOnRoot @ react-dom.development.js?ef6f:22322
scheduleUpdateOnFiber @ react-dom.development.js?ef6f:21874
updateContainer @ react-dom.development.js?ef6f:25475
eval @ react-dom.development.js?ef6f:26014
unbatchedUpdates @ react-dom.development.js?ef6f:22424
legacyRenderSubtreeIntoContainer @ react-dom.development.js?ef6f:26013
hydrate @ react-dom.development.js?ef6f:26079
eval @ index.tsx?d986:21
Promise.then (async)
eval @ index.tsx?d986:9
./src/index.tsx @ main.js:189
__webpack_require__ @ main.js:1387
(anonymous) @ main.js:2502
(anonymous) @ main.js:2506
react-hot-loader.development.js?4e17:2409 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `InnerLoadable`.
    at createFiberFromTypeAndProps (react-dom.development.js?ef6f:25051)
    at createFiberFromElement (react-dom.development.js?ef6f:25079)
    at reconcileSingleElement (react-dom.development.js?ef6f:14045)
    at reconcileChildFibers (react-dom.development.js?ef6f:14105)
    at reconcileChildren (react-dom.development.js?ef6f:16983)
    at finishClassComponent (react-dom.development.js?ef6f:17504)
    at updateClassComponent (react-dom.development.js?ef6f:17428)
    at beginWork (react-dom.development.js?ef6f:19066)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ef6f:3946)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ef6f:3995)
createFiberFromTypeAndProps @ react-dom.development.js?ef6f:25051
createFiberFromElement @ react-dom.development.js?ef6f:25079
reconcileSingleElement @ react-dom.development.js?ef6f:14045
reconcileChildFibers @ react-dom.development.js?ef6f:14105
reconcileChildren @ react-dom.development.js?ef6f:16983
finishClassComponent @ react-dom.development.js?ef6f:17504
updateClassComponent @ react-dom.development.js?ef6f:17428
beginWork @ react-dom.development.js?ef6f:19066
callCallback @ react-dom.development.js?ef6f:3946
invokeGuardedCallbackDev @ react-dom.development.js?ef6f:3995
invokeGuardedCallback @ react-dom.development.js?ef6f:4057
beginWork$1 @ react-dom.development.js?ef6f:23957
performUnitOfWork @ react-dom.development.js?ef6f:22772
workLoopSync @ react-dom.development.js?ef6f:22700
renderRootSync @ react-dom.development.js?ef6f:22663
performSyncWorkOnRoot @ react-dom.development.js?ef6f:22286
scheduleUpdateOnFiber @ react-dom.development.js?ef6f:21874
updateContainer @ react-dom.development.js?ef6f:25475
eval @ react-dom.development.js?ef6f:26014
unbatchedUpdates @ react-dom.development.js?ef6f:22424
legacyRenderSubtreeIntoContainer @ react-dom.development.js?ef6f:26013
hydrate @ react-dom.development.js?ef6f:26079
eval @ index.tsx?d986:21
Promise.then (async)
eval @ index.tsx?d986:9
./src/index.tsx @ main.js:189
__webpack_require__ @ main.js:1387
(anonymous) @ main.js:2502
(anonymous) @ main.js:2506
react-dom.development.js?ef6f:20078 The above error occurred in the <AppContainer> component:

    at AppContainer (eval at ES6ProxyComponentFactory (webpack-internal:///../../node_modules/react-hot-loader/dist/react-hot-loader.development.js), <anonymous>:14:7)
    at HotExportedComponent (eval at ES6ProxyComponentFactory (webpack-internal:///../../node_modules/react-hot-loader/dist/react-hot-loader.development.js), <anonymous>:14:7)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js?ef6f:20078
update.callback @ react-dom.development.js?ef6f:20111
callCallback @ react-dom.development.js?ef6f:12311
commitUpdateQueue @ react-dom.development.js?ef6f:12332
commitLifeCycles @ react-dom.development.js?ef6f:20729
commitLayoutEffects @ react-dom.development.js?ef6f:23419
callCallback @ react-dom.development.js?ef6f:3946
invokeGuardedCallbackDev @ react-dom.development.js?ef6f:3995
invokeGuardedCallback @ react-dom.development.js?ef6f:4057
commitRootImpl @ react-dom.development.js?ef6f:23144
unstable_runWithPriority @ scheduler.development.js?e22e:646
runWithPriority$1 @ react-dom.development.js?ef6f:11269
commitRoot @ react-dom.development.js?ef6f:22983
performSyncWorkOnRoot @ react-dom.development.js?ef6f:22322
eval @ react-dom.development.js?ef6f:11320
unstable_runWithPriority @ scheduler.development.js?e22e:646
runWithPriority$1 @ react-dom.development.js?ef6f:11269
flushSyncCallbackQueueImpl @ react-dom.development.js?ef6f:11315
flushSyncCallbackQueue @ react-dom.development.js?ef6f:11302
unbatchedUpdates @ react-dom.development.js?ef6f:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js?ef6f:26013
hydrate @ react-dom.development.js?ef6f:26079
eval @ index.tsx?d986:21
Promise.then (async)
eval @ index.tsx?d986:9
./src/index.tsx @ main.js:189
__webpack_require__ @ main.js:1387
(anonymous) @ main.js:2502
(anonymous) @ main.js:2506
react-dom.development.js?ef6f:25051 Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `InnerLoadable`.
    at createFiberFromTypeAndProps (react-dom.development.js?ef6f:25051)
    at createFiberFromElement (react-dom.development.js?ef6f:25079)
    at reconcileSingleElement (react-dom.development.js?ef6f:14045)
    at reconcileChildFibers (react-dom.development.js?ef6f:14105)
    at reconcileChildren (react-dom.development.js?ef6f:16983)
    at finishClassComponent (react-dom.development.js?ef6f:17504)
    at updateClassComponent (react-dom.development.js?ef6f:17428)
    at beginWork (react-dom.development.js?ef6f:19066)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ef6f:3946)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ef6f:3995)

Details

## System:
 - OS: Windows 10 10.0.19041
 - CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor        

 - Memory: 8.38 GB / 15.95 GB
## Binaries:
 - Node: 12.16.3 - C:\Program Files\nodejs\node.EXE       
 - Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD - npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
## npmPackages:
 - @loadable/babel-plugin: ^5.13.2 => 5.13.2
 - @loadable/component: ^5.14.1 => 5.14.1
 - @loadable/server: ^5.14.0 => 5.14.0
 - @loadable/webpack-plugin: ^5.14.0 => 5.14.0
 - webpack: > 5.0.0

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:10

github_iconTop GitHub Comments

2reactions
theKasheycommented, Oct 25, 2020

The only know method for webpack5 is to replace async scripts by defer scripts. Which is not supported by loadable itself, and you have to replace strings manually 😦 The problem is on webpack side.

Closing this issue as a duplicate of https://github.com/gregberge/loadable-components/issues/636

1reaction
zemdcommented, Nov 13, 2020

@joacub then you are experiencing different issue)) I assume you are trying to do ssr, and then you have 2 webpack configs with 2 different settings, and you should have 2 different stats file. so when you collect chunks using root element from one folder, stats file you should import from another. but this is only my assumption - you haven’t put any details of your problem.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Server Side Rendering - Loadable Components
Add loadableReady client-side. Loadable components loads all your scripts asynchronously to ensure optimal performances. All scripts are loaded in parallel, ...
Read more >
loadable/componet not loading on server side rendering
For Loadable ready components, inside your App components, you can wrap your required component with Providers of your own choice:
Read more >
Gatsby-plugin-loadable-components-ssr-fix NPM | npm.io
// gatsby-browser.js const loadableReady = require('@loadable/component').loadableReady; exports.replaceHydrateFunction = () => { return (element, container, ...
Read more >
How to implement loadable components for bundle splitting ...
@loadable/component provides a complete solution to make Server ... If you don't want to follow this step, you can add this in the...
Read more >
@loadable/component | Yarn - Package Manager
@loadable/component. owner gregberge1.8mMIT5.15.2DT · vulns 0 vulnerabilities. React code splitting made easy. react, ssr, webpack, code-splitting ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

On the fly publicPath when lazy-loading using @loadable/component?

Next page

Type def component in router config