Skip to content
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.

Sign up for GitHub

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

Jump to bottom

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

Closed
xnerhu opened this issue Oct 24, 2020 · 10 comments
Closed

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

xnerhu opened this issue Oct 24, 2020 · 10 comments

Comments

@xnerhu
Copy link

xnerhu commented Oct 24, 2020

🐛 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
@open-collective-bot
Copy link

Hey @xnerhu 👋,
Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.
If you use Loadable at work, you can also ask your company to sponsor us ❤️.

@theKashey
Copy link
Collaborator

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 #636

@zemd
Copy link

zemd commented Oct 30, 2020

confirm replacing async with defer for scriptTags works. Thanks.

@joacub
Copy link

joacub commented Nov 11, 2020

confirm replacing async with defer for scriptTags works. Thanks.

where did you change that option ?

@theKashey
Copy link
Collaborator

Someone please pull request it 🙏

@zemd
Copy link

zemd commented Nov 13, 2020

where did you change that option ?
@joacub

when you do ssr and doing something like

const extractor = new ChunkExtractor({
  statsFile,
  entrypoints: ['app'],
});
const root = React.createElement(App, {
  BrowserRouter: Router,
});
const jsx = extractor.collectChunks(root);
//...

then you can collect scripts by running

const scriptTags = extractor.getScriptTags();

so on this point you have to replace async with defer

const scriptTags = extractor.getScriptTags().replace(/async/gi, 'defer');

or if you are using node15+

const scriptTags = extractor.getScriptTags().replaceAll('async', 'defer');

@joacub
Copy link

joacub commented Nov 13, 2020

That doesn’t work, problem is the collector stats are wrong does not have the correct stats file. Is getting the server compilation i dont know why... and does not get the right assets for browser...

@zemd
Copy link

zemd commented 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.

@joacub
Copy link

joacub commented 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.

Yes you are completely right, I don’t know why it’s getting the server stats file maybe a doing something wrong, i will check and come back to you

@joacub
Copy link

joacub commented Nov 13, 2020

Is working now, i forgot put writetodisk option. Is working great again, thanks

@SkipEveryLunch SkipEveryLunch mentioned this issue Jan 1, 2021
Closed
@DAreRodz DAreRodz mentioned this issue Mar 8, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@zemd @theKashey @joacub @xnerhu