Error when running shared-routing application

I’ve checked out out the examples and I’m trying to get the shared-routing example working.

Steps to reproduce:

1. cd shared-routing
2. yarn
3. npx lerna boostrap
4. yarn start

Result

Uncaught Error: Shared module is not available for eager consumption: webpack/sharing/consume/default/events/events
    at Object.__webpack_require__.m.<computed> (remoteEntry.js:1283)
    at __webpack_require__ (remoteEntry.js:411)
    at fn (remoteEntry.js:811)
    at eval (emitter.js:1)
    at Object.../../node_modules/webpack/hot/emitter.js (remoteEntry.js:269)
    at __webpack_require__ (remoteEntry.js:411)
    at fn (remoteEntry.js:811)
    at eval (reloadApp.js:5)
    at Module.../../node_modules/webpack-dev-server/client/utils/reloadApp.js (remoteEntry.js:204)
    at __webpack_require__ (remoteEntry.js:411)

I’ve read up on the eager consumption error and there are workarounds, but I didn’t think that would be required for the untouched demo.

The README only says yarn start, so if I set it up wrong, let me know.

[mPemba]

Super curious to know how to get the shared-routing and shared-context examples working. Any advice would be very much appreciated 🙏

[I2olanD]

Hello,

I tried @Graysoncc suggestion but now I see following errors in the console. Anyone can help? I removed the events package from sales & dashboard apps and reinstalled node modules.

react.development.js:315 Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 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 Shell. in Shell (created by App) in App printWarning @ react.development.js:315 error @ react.development.js:287 createElementWithValidation @ react.development.js:1788 Shell @ Shell.js:70 renderWithHooks @ react-dom.development.js:14803 mountIndeterminateComponent @ react-dom.development.js:17482 beginWork @ react-dom.development.js:18596 beginWork$1 @ react-dom.development.js:23179 performUnitOfWork @ react-dom.development.js:22154 workLoopSync @ react-dom.development.js:22130 performSyncWorkOnRoot @ react-dom.development.js:21756 scheduleUpdateOnFiber @ react-dom.development.js:21188 updateContainer @ react-dom.development.js:24373 eval @ react-dom.development.js:24758 unbatchedUpdates @ react-dom.development.js:21903 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757 render @ react-dom.development.js:24840 eval @ bootstrap.js:10 ./src/bootstrap.js @ src_bootstrap_js.b297fc44a5f60ca632b7.js:68 webpack_require @ main.js:355 fn @ main.js:739 Promise.then (async) eval @ index.js:1 ./src/index.js @ main.js:29 webpack_require @ main.js:355 (anonymous) @ main.js:1856 (anonymous) @ main.js:1858 react.development.js:315 Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 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 Shell. in Shell (created by App) in App printWarning @ react.development.js:315 error @ react.development.js:287 createElementWithValidation @ react.development.js:1788 Shell @ Shell.js:59 renderWithHooks @ react-dom.development.js:14803 mountIndeterminateComponent @ react-dom.development.js:17482 beginWork @ react-dom.development.js:18596 beginWork$1 @ react-dom.development.js:23179 performUnitOfWork @ react-dom.development.js:22154 workLoopSync @ react-dom.development.js:22130 performSyncWorkOnRoot @ react-dom.development.js:21756 scheduleUpdateOnFiber @ react-dom.development.js:21188 updateContainer @ react-dom.development.js:24373 eval @ react-dom.development.js:24758 unbatchedUpdates @ react-dom.development.js:21903 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757 render @ react-dom.development.js:24840 eval @ bootstrap.js:10 ./src/bootstrap.js @ src_bootstrap_js.b297fc44a5f60ca632b7.js:68 webpack_require @ main.js:355 fn @ main.js:739 Promise.then (async) eval @ index.js:1 ./src/index.js @ main.js:29 webpack_require @ main.js:355 (anonymous) @ main.js:1856 (anonymous) @ main.js:1858 3AppDrawer.js:52 Uncaught TypeError: (0 , react_router_dom__WEBPACK_IMPORTED_MODULE_4__.useMatch) is not a function at ListItemLink (AppDrawer.js:52:78) at renderWithHooks (react-dom.development.js:14803:18) at mountIndeterminateComponent (react-dom.development.js:17482:13) at beginWork (react-dom.development.js:18596:16) at HTMLUnknownElement.callCallback (react-dom.development.js:188:14) at Object.invokeGuardedCallbackDev (react-dom.development.js:237:16) at invokeGuardedCallback (react-dom.development.js:292:31) at beginWork$1 (react-dom.development.js:23203:7) at performUnitOfWork (react-dom.development.js:22154:12) at workLoopSync (react-dom.development.js:22130:22) ListItemLink @ AppDrawer.js:52 renderWithHooks @ react-dom.development.js:14803 mountIndeterminateComponent @ react-dom.development.js:17482 beginWork @ react-dom.development.js:18596 callCallback @ react-dom.development.js:188 invokeGuardedCallbackDev @ react-dom.development.js:237 invokeGuardedCallback @ react-dom.development.js:292 beginWork$1 @ react-dom.development.js:23203 performUnitOfWork @ react-dom.development.js:22154 workLoopSync @ react-dom.development.js:22130 performSyncWorkOnRoot @ react-dom.development.js:21756 scheduleUpdateOnFiber @ react-dom.development.js:21188 updateContainer @ react-dom.development.js:24373 eval @ react-dom.development.js:24758 unbatchedUpdates @ react-dom.development.js:21903 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757 render @ react-dom.development.js:24840 eval @ bootstrap.js:10 ./src/bootstrap.js @ src_bootstrap_js.b297fc44a5f60ca632b7.js:68 webpack_require @ main.js:355 fn @ main.js:739 Promise.then (async) eval @ index.js:1 ./src/index.js @ main.js:29 webpack_require @ main.js:355 (anonymous) @ main.js:1856 (anonymous) @ main.js:1858 react-dom.development.js:23965 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 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 Shell. at createFiberFromTypeAndProps (react-dom.development.js:23965:21) at createFiberFromElement (react-dom.development.js:23988:15) at reconcileSingleElement (react-dom.development.js:14233:23) at reconcileChildFibers (react-dom.development.js:14293:35) at updateSuspenseComponent (react-dom.development.js:17712:37) at beginWork (react-dom.development.js:18633:14) at HTMLUnknownElement.callCallback (react-dom.development.js:188:14) at Object.invokeGuardedCallbackDev (react-dom.development.js:237:16) at invokeGuardedCallback (react-dom.development.js:292:31) at beginWork$1 (react-dom.development.js:23203:7) createFiberFromTypeAndProps @ react-dom.development.js:23965 createFiberFromElement @ react-dom.development.js:23988 reconcileSingleElement @ react-dom.development.js:14233 reconcileChildFibers @ react-dom.development.js:14293 updateSuspenseComponent @ react-dom.development.js:17712 beginWork @ react-dom.development.js:18633 callCallback @ react-dom.development.js:188 invokeGuardedCallbackDev @ react-dom.development.js:237 invokeGuardedCallback @ react-dom.development.js:292 beginWork$1 @ react-dom.development.js:23203 performUnitOfWork @ react-dom.development.js:22154 workLoopSync @ react-dom.development.js:22130 performSyncWorkOnRoot @ react-dom.development.js:21756 scheduleUpdateOnFiber @ react-dom.development.js:21188 updateContainer @ react-dom.development.js:24373 eval @ react-dom.development.js:24758 unbatchedUpdates @ react-dom.development.js:21903 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757 render @ react-dom.development.js:24840 eval @ bootstrap.js:10 ./src/bootstrap.js @ src_bootstrap_js.b297fc44a5f60ca632b7.js:68 webpack_require @ main.js:355 fn @ main.js:739 Promise.then (async) eval @ index.js:1 ./src/index.js @ main.js:29 webpack_require @ main.js:355 (anonymous) @ main.js:1856 (anonymous) @ main.js:1858 react-dom.development.js:19527 The above error occurred in the <Suspense> component: in Suspense (created by Shell) in div (created by Styled(MuiBox)) in Styled(MuiBox) (created by Shell) in Viewport (created by Shell) in Router (created by BrowserRouter) in BrowserRouter (created by Shell) in ServiceProvider (created by Shell) in Shell (created by App) in App

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://fb.me/react-error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:19527 logError @ react-dom.development.js:19564 update.callback @ react-dom.development.js:20708 callCallback @ react-dom.development.js:12490 commitUpdateQueue @ react-dom.development.js:12511 commitLifeCycles @ react-dom.development.js:19883 commitLayoutEffects @ react-dom.development.js:22803 callCallback @ react-dom.development.js:188 invokeGuardedCallbackDev @ react-dom.development.js:237 invokeGuardedCallback @ react-dom.development.js:292 commitRootImpl @ react-dom.development.js:22541 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 commitRoot @ react-dom.development.js:22381 finishSyncRender @ react-dom.development.js:21807 performSyncWorkOnRoot @ react-dom.development.js:21793 scheduleUpdateOnFiber @ react-dom.development.js:21188 updateContainer @ react-dom.development.js:24373 eval @ react-dom.development.js:24758 unbatchedUpdates @ react-dom.development.js:21903 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757 render @ react-dom.development.js:24840 eval @ bootstrap.js:10 ./src/bootstrap.js @ src_bootstrap_js.b297fc44a5f60ca632b7.js:68 webpack_require @ main.js:355 fn @ main.js:739 Promise.then (async) eval @ index.js:1 ./src/index.js @ main.js:29 webpack_require @ main.js:355 (anonymous) @ main.js:1856 (anonymous) @ main.js:1858 3react-dom.development.js:19527 The above error occurred in the <ListItemLink> component: in ListItemLink (created by Menu) in ul (created by ForwardRef(List)) in ForwardRef(List) (created by WithStyles(ForwardRef(List))) in WithStyles(ForwardRef(List)) (created by Menu) in Menu (created by AppDrawer) in div (created by ForwardRef(Paper)) in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper))) in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Drawer)) in div (created by ForwardRef(Drawer)) in ForwardRef(Drawer) (created by WithStyles(ForwardRef(Drawer))) in WithStyles(ForwardRef(Drawer)) (created by AppDrawer) in AppDrawer (created by Shell) in div (created by Styled(MuiBox)) in Styled(MuiBox) (created by Shell) in Viewport (created by Shell) in Router (created by BrowserRouter) in BrowserRouter (created by Shell) in ServiceProvider (created by Shell) in Shell (created by App) in App

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://fb.me/react-error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:19527 logError @ react-dom.development.js:19564 update.callback @ react-dom.development.js:20708 callCallback @ react-dom.development.js:12490 commitUpdateQueue @ react-dom.development.js:12511 commitLifeCycles @ react-dom.development.js:19883 commitLayoutEffects @ react-dom.development.js:22803 callCallback @ react-dom.development.js:188 invokeGuardedCallbackDev @ react-dom.development.js:237 invokeGuardedCallback @ react-dom.development.js:292 commitRootImpl @ react-dom.development.js:22541 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 commitRoot @ react-dom.development.js:22381 finishSyncRender @ react-dom.development.js:21807 performSyncWorkOnRoot @ react-dom.development.js:21793 scheduleUpdateOnFiber @ react-dom.development.js:21188 updateContainer @ react-dom.development.js:24373 eval @ react-dom.development.js:24758 unbatchedUpdates @ react-dom.development.js:21903 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757 render @ react-dom.development.js:24840 eval @ bootstrap.js:10 ./src/bootstrap.js @ src_bootstrap_js.b297fc44a5f60ca632b7.js:68 webpack_require @ main.js:355 fn @ main.js:739 Promise.then (async) eval @ index.js:1 ./src/index.js @ main.js:29 webpack_require @ main.js:355 (anonymous) @ main.js:1856 (anonymous) @ main.js:1858 react-dom.development.js:23965 Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 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 Shell. at createFiberFromTypeAndProps (react-dom.development.js:23965:21) at createFiberFromElement (react-dom.development.js:23988:15) at reconcileSingleElement (react-dom.development.js:14233:23) at reconcileChildFibers (react-dom.development.js:14293:35) at updateSuspenseComponent (react-dom.development.js:17712:37) at beginWork (react-dom.development.js:18633:14) at HTMLUnknownElement.callCallback (react-dom.development.js:188:14) at Object.invokeGuardedCallbackDev (react-dom.development.js:237:16) at invokeGuardedCallback (react-dom.development.js:292:31) at beginWork$1 (react-dom.development.js:23203:7)