Skip to content

Instantly share code, notes, and snippets.

@whisher
Last active October 24, 2018 06:41
Show Gist options
  • Save whisher/ca655d4903c770879049a83d3a4a80a3 to your computer and use it in GitHub Desktop.
Save whisher/ca655d4903c770879049a83d3a4a80a3 to your computer and use it in GitHub Desktop.
// App
import { AuthLayoutMain } from "./features/auth/layout";
const BlogLayoutMain = lazy(() => import('./features/blog/layout'));
//import { BlogLayoutMain } from "./features/blog/layout";
import { AdminLayoutMain } from "./features/admin/layout";
const App = () => {
return (
<MuiThemeProvider theme={theme}>
<Suspense fallback={<div>Loading...</div>}>
<Router>
<Switch>
<Route path={AUTH} component={AuthLayoutMain} />
<Route path={ADMIN_DASHBOARD} component={AdminLayoutMain} />
<Route path={HOME} exact component={BlogLayoutMain} />
<Redirect from="*" to={HOME} />
</Switch>
</Router>
</Suspense>
</MuiThemeProvider>
);
};
checkPropTypes.js?a15c:19 Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.
in Route (created by App)
in App
in Provider
printWarning @ checkPropTypes.js?a15c:19
checkPropTypes @ checkPropTypes.js?a15c:82
validatePropTypes @ react.development.js?72d0:1568
createElementWithValidation @ react.development.js?72d0:1657
App @ App.jsx?1591:32
mountIndeterminateComponent @ react-dom.development.js?61bb:14003
beginWork @ react-dom.development.js?61bb:14470
performUnitOfWork @ react-dom.development.js?61bb:17014
workLoop @ react-dom.development.js?61bb:17054
renderRoot @ react-dom.development.js?61bb:17133
performWorkOnRoot @ react-dom.development.js?61bb:17993
performWork @ react-dom.development.js?61bb:17901
performSyncWork @ react-dom.development.js?61bb:17873
requestWork @ react-dom.development.js?61bb:17761
scheduleWork @ react-dom.development.js?61bb:17566
scheduleRootUpdate @ react-dom.development.js?61bb:18240
updateContainerAtExpirationTime @ react-dom.development.js?61bb:18267
updateContainer @ react-dom.development.js?61bb:18324
ReactRoot.render @ react-dom.development.js?61bb:18586
(anonymous) @ react-dom.development.js?61bb:18726
unbatchedUpdates @ react-dom.development.js?61bb:18124
legacyRenderSubtreeIntoContainer @ react-dom.development.js?61bb:18722
render @ react-dom.development.js?61bb:18783
(anonymous) @ index.jsx?ed12:31
./src/index.jsx @ main.js:8049
__webpack_require__ @ main.js:768
fn @ main.js:131
0 @ main.js:8134
__webpack_require__ @ main.js:768
(anonymous) @ main.js:904
(anonymous) @ main.js:907
react-dom.development.js?61bb:523 Warning: lazy: Expected the result of a dynamic import() call. Instead received: [object Module]
Your code should look like:
const MyComponent = lazy(() => import('./MyComponent'))
warningWithoutStack @ react-dom.development.js?61bb:523
warning @ react-dom.development.js?61bb:2665
(anonymous) @ react-dom.development.js?61bb:13467
Promise.then (async)
readLazyComponentType @ react-dom.development.js?61bb:13462
mountLazyComponent @ react-dom.development.js?61bb:13893
beginWork @ react-dom.development.js?61bb:14475
performUnitOfWork @ react-dom.development.js?61bb:17014
workLoop @ react-dom.development.js?61bb:17054
renderRoot @ react-dom.development.js?61bb:17133
performWorkOnRoot @ react-dom.development.js?61bb:17993
performWork @ react-dom.development.js?61bb:17901
performSyncWork @ react-dom.development.js?61bb:17873
requestWork @ react-dom.development.js?61bb:17761
scheduleWork @ react-dom.development.js?61bb:17566
scheduleRootUpdate @ react-dom.development.js?61bb:18240
updateContainerAtExpirationTime @ react-dom.development.js?61bb:18267
updateContainer @ react-dom.development.js?61bb:18324
ReactRoot.render @ react-dom.development.js?61bb:18586
(anonymous) @ react-dom.development.js?61bb:18726
unbatchedUpdates @ react-dom.development.js?61bb:18124
legacyRenderSubtreeIntoContainer @ react-dom.development.js?61bb:18722
render @ react-dom.development.js?61bb:18783
(anonymous) @ index.jsx?ed12:31
./src/index.jsx @ main.js:8049
__webpack_require__ @ main.js:768
fn @ main.js:131
0 @ main.js:8134
__webpack_require__ @ main.js:768
(anonymous) @ main.js:904
(anonymous) @ main.js:907
react-dom.development.js?61bb:55 Uncaught Error: Element type is invalid. Received a promise that resolves to: undefined. Promise elements must resolve to a class or function.
at invariant (react-dom.development.js?61bb:55)
at mountLazyComponent (react-dom.development.js?61bb:13927)
at beginWork (react-dom.development.js?61bb:14475)
at performUnitOfWork (react-dom.development.js?61bb:17014)
at workLoop (react-dom.development.js?61bb:17054)
at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:199)
at invokeGuardedCallback (react-dom.development.js?61bb:256)
at replayUnitOfWork (react-dom.development.js?61bb:16366)
at renderRoot (react-dom.development.js?61bb:17148)
invariant @ react-dom.development.js?61bb:55
mountLazyComponent @ react-dom.development.js?61bb:13927
beginWork @ react-dom.development.js?61bb:14475
performUnitOfWork @ react-dom.development.js?61bb:17014
workLoop @ react-dom.development.js?61bb:17054
callCallback @ react-dom.development.js?61bb:149
invokeGuardedCallbackDev @ react-dom.development.js?61bb:199
invokeGuardedCallback @ react-dom.development.js?61bb:256
replayUnitOfWork @ react-dom.development.js?61bb:16366
renderRoot @ react-dom.development.js?61bb:17148
performWorkOnRoot @ react-dom.development.js?61bb:17993
performWork @ react-dom.development.js?61bb:17901
performSyncWork @ react-dom.development.js?61bb:17873
requestWork @ react-dom.development.js?61bb:17761
retrySuspendedRoot @ react-dom.development.js?61bb:17460
wrapped @ scheduler-tracing.development.js?1979:200
Promise.then (async)
throwException @ react-dom.development.js?61bb:16007
renderRoot @ react-dom.development.js?61bb:17168
performWorkOnRoot @ react-dom.development.js?61bb:17993
performWork @ react-dom.development.js?61bb:17901
performSyncWork @ react-dom.development.js?61bb:17873
requestWork @ react-dom.development.js?61bb:17761
scheduleWork @ react-dom.development.js?61bb:17566
scheduleRootUpdate @ react-dom.development.js?61bb:18240
updateContainerAtExpirationTime @ react-dom.development.js?61bb:18267
updateContainer @ react-dom.development.js?61bb:18324
ReactRoot.render @ react-dom.development.js?61bb:18586
(anonymous) @ react-dom.development.js?61bb:18726
unbatchedUpdates @ react-dom.development.js?61bb:18124
legacyRenderSubtreeIntoContainer @ react-dom.development.js?61bb:18722
render @ react-dom.development.js?61bb:18783
(anonymous) @ index.jsx?ed12:31
./src/index.jsx @ main.js:8049
__webpack_require__ @ main.js:768
fn @ main.js:131
0 @ main.js:8134
__webpack_require__ @ main.js:768
(anonymous) @ main.js:904
(anonymous) @ main.js:907
react-dom.development.js?61bb:15123 The above error occurred in one of your React components:
in Unknown (created by Route)
in Route (created by App)
in Switch (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in MuiThemeProvider (created by App)
in App
in Provider
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?61bb:15123
logError @ react-dom.development.js?61bb:15157
update.callback @ react-dom.development.js?61bb:15902
callCallback @ react-dom.development.js?61bb:11194
commitUpdateEffects @ react-dom.development.js?61bb:11233
commitUpdateQueue @ react-dom.development.js?61bb:11224
commitLifeCycles @ react-dom.development.js?61bb:15290
commitAllLifeCycles @ react-dom.development.js?61bb:16523
callCallback @ react-dom.development.js?61bb:149
invokeGuardedCallbackDev @ react-dom.development.js?61bb:199
invokeGuardedCallback @ react-dom.development.js?61bb:256
commitRoot @ react-dom.development.js?61bb:16677
completeRoot @ react-dom.development.js?61bb:18069
performWorkOnRoot @ react-dom.development.js?61bb:17997
performWork @ react-dom.development.js?61bb:17901
performSyncWork @ react-dom.development.js?61bb:17873
requestWork @ react-dom.development.js?61bb:17761
retrySuspendedRoot @ react-dom.development.js?61bb:17460
wrapped @ scheduler-tracing.development.js?1979:200
Promise.then (async)
throwException @ react-dom.development.js?61bb:16007
renderRoot @ react-dom.development.js?61bb:17168
performWorkOnRoot @ react-dom.development.js?61bb:17993
performWork @ react-dom.development.js?61bb:17901
performSyncWork @ react-dom.development.js?61bb:17873
requestWork @ react-dom.development.js?61bb:17761
scheduleWork @ react-dom.development.js?61bb:17566
scheduleRootUpdate @ react-dom.development.js?61bb:18240
updateContainerAtExpirationTime @ react-dom.development.js?61bb:18267
updateContainer @ react-dom.development.js?61bb:18324
ReactRoot.render @ react-dom.development.js?61bb:18586
(anonymous) @ react-dom.development.js?61bb:18726
unbatchedUpdates @ react-dom.development.js?61bb:18124
legacyRenderSubtreeIntoContainer @ react-dom.development.js?61bb:18722
render @ react-dom.development.js?61bb:18783
(anonymous) @ index.jsx?ed12:31
./src/index.jsx @ main.js:8049
__webpack_require__ @ main.js:768
fn @ main.js:131
0 @ main.js:8134
__webpack_require__ @ main.js:768
(anonymous) @ main.js:904
(anonymous) @ main.js:907
react-dom.development.js?61bb:55 Uncaught (in promise) Error: Element type is invalid. Received a promise that resolves to: undefined. Promise elements must resolve to a class or function.
at invariant (react-dom.development.js?61bb:55)
at mountLazyComponent (react-dom.development.js?61bb:13927)
at beginWork (react-dom.development.js?61bb:14475)
at performUnitOfWork (react-dom.development.js?61bb:17014)
at workLoop (react-dom.development.js?61bb:17054)
at renderRoot (react-dom.development.js?61bb:17133)
at performWorkOnRoot (react-dom.development.js?61bb:17993)
at performWork (react-dom.development.js?61bb:17901)
at performSyncWork (react-dom.development.js?61bb:17873)
at requestWork (react-dom.development.js?61bb:17761)
invariant @ react-dom.development.js?61bb:55
mountLazyComponent @ react-dom.development.js?61bb:13927
beginWork @ react-dom.development.js?61bb:14475
performUnitOfWork @ react-dom.development.js?61bb:17014
workLoop @ react-dom.development.js?61bb:17054
renderRoot @ react-dom.development.js?61bb:17133
performWorkOnRoot @ react-dom.development.js?61bb:17993
performWork @ react-dom.development.js?61bb:17901
performSyncWork @ react-dom.development.js?61bb:17873
requestWork @ react-dom.development.js?61bb:17761
retrySuspendedRoot @ react-dom.development.js?61bb:17460
wrapped @ scheduler-tracing.development.js?1979:200
Promise.then (async)
throwException @ react-dom.development.js?61bb:16007
renderRoot @ react-dom.development.js?61bb:17168
performWorkOnRoot @ react-dom.development.js?61bb:17993
performWork @ react-dom.development.js?61bb:17901
performSyncWork @ react-dom.development.js?61bb:17873
requestWork @ react-dom.development.js?61bb:17761
scheduleWork @ react-dom.development.js?61bb:17566
scheduleRootUpdate @ react-dom.development.js?61bb:18240
updateContainerAtExpirationTime @ react-dom.development.js?61bb:18267
updateContainer @ react-dom.development.js?61bb:18324
ReactRoot.render @ react-dom.development.js?61bb:18586
(anonymous) @ react-dom.development.js?61bb:18726
unbatchedUpdates @ react-dom.development.js?61bb:18124
legacyRenderSubtreeIntoContainer @ react-dom.development.js?61bb:18722
render @ react-dom.development.js?61bb:18783
(anonymous) @ index.jsx?ed12:31
./src/index.jsx @ main.js:8049
__webpack_require__ @ main.js:768
fn @ main.js:131
0 @ main.js:8134
__webpack_require__ @ main.js:768
(anonymous) @ main.js:904
(anonymous) @ main.js:907
client?e906:77 [WDS] Hot Module Replacement enabled.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment