viewmodel-react
viewmodel-react copied to clipboard
How to use with react-loadable component ?
import React from 'react';
import { Switch, Route } from 'react-router-dom'
import Loader from 'react-loadable';
import {Loading} from '/imports/components/Loading';
const loaderWrapper = (loader) => Loader({
loading: () => <Loading />,
loader
})
const About = loaderWrapper(() => import('/imports/pages/About'))
const Home = loaderWrapper(() => import('/imports/pages/Home'))
const Unit = loaderWrapper(() => import('/imports/pages/Unit'))
const Table = loaderWrapper(() => import('/imports/pages/Table'))
export default () => (
<div>
<Switch>
<Route exact name="home" path="/" component={Home}></Route>
<Route exact name="unit" path="/unit" component={Unit}></Route>
<Route exact name="table" path="/table" component={Table}></Route>
<Route exact name="about" path="/about" component={About}></Route>
</Switch>
</div>
)
but if component like: Home
, About
... use with viewmodel will error:
modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:2662 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 `LoadableComponent`.
in LoadableComponent (created by Route)
in Route
in Switch
in div
in Unknown (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in div (created by App)
in App
printWarning @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:2662
warning @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:2686
createElementWithValidation @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:2263
render @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:36838
render @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:36973
finishClassComponent @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:12237
updateClassComponent @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:12214
beginWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:12588
performUnitOfWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:14579
workLoop @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:14643
callCallback @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:4875
invokeGuardedCallbackDev @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:4914
invokeGuardedCallback @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:4771
renderRoot @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:14721
performWorkOnRoot @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15335
performWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15287
requestWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15196
scheduleWorkImpl @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15079
scheduleWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15041
enqueueSetState @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:10539
Component.setState @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:1264
update @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:36937
(anonymous) @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:36947
(anonymous) @ meteor.js?hash=cbcc712d51de4298c275e8dcf25c66c29914f19a:1167
Promise resolved (async)
Promise.then @ promise.js?hash=53619fb40e2ae3a1c694bc7fbad9be0adcfdb5fe:97
componentWillMount @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:36946
callComponentWillMount @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:10692
mountClassInstance @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:10748
updateClassComponent @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:12204
beginWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:12588
performUnitOfWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:14579
workLoop @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:14643
callCallback @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:4875
invokeGuardedCallbackDev @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:4914
invokeGuardedCallback @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:4771
renderRoot @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:14721
performWorkOnRoot @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15335
performWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15287
requestWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15196
scheduleWorkImpl @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15079
scheduleWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15041
scheduleTopLevelUpdate @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15512
updateContainer @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15550
(anonymous) @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:19567
unbatchedUpdates @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15421
renderSubtreeIntoContainer @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:19566
render @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:19631
(anonymous) @ index.js:13
maybeReady @ meteor.js?hash=cbcc712d51de4298c275e8dcf25c66c29914f19a:871
loadingCompleted @ meteor.js?hash=cbcc712d51de4298c275e8dcf25c66c29914f19a:883
modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:2608 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 `LoadableComponent`.
at invariant (modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:2608)
at createFiberFromElement (modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:10086)
at reconcileSingleElement (modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:11887)
at reconcileChildFibers (modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:11991)
at reconcileChildrenAtExpirationTime (modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:12123)
at reconcileChildren (modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:12106)
at finishClassComponent (modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:12242)
at updateClassComponent (modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:12214)
at beginWork (modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:12588)
at performUnitOfWork (modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:14579)
invariant @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:2608
createFiberFromElement @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:10086
reconcileSingleElement @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:11887
reconcileChildFibers @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:11991
reconcileChildrenAtExpirationTime @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:12123
reconcileChildren @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:12106
finishClassComponent @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:12242
updateClassComponent @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:12214
beginWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:12588
performUnitOfWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:14579
workLoop @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:14643
callCallback @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:4875
invokeGuardedCallbackDev @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:4914
invokeGuardedCallback @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:4771
renderRoot @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:14721
performWorkOnRoot @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15335
performWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15287
requestWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15196
scheduleWorkImpl @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15079
scheduleWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15041
enqueueSetState @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:10539
Component.setState @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:1264
update @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:36937
(anonymous) @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:36947
(anonymous) @ meteor.js?hash=cbcc712d51de4298c275e8dcf25c66c29914f19a:1167
Promise resolved (async)
Promise.then @ promise.js?hash=53619fb40e2ae3a1c694bc7fbad9be0adcfdb5fe:97
componentWillMount @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:36946
callComponentWillMount @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:10692
mountClassInstance @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:10748
updateClassComponent @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:12204
beginWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:12588
performUnitOfWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:14579
workLoop @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:14643
callCallback @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:4875
invokeGuardedCallbackDev @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:4914
invokeGuardedCallback @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:4771
renderRoot @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:14721
performWorkOnRoot @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15335
performWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15287
requestWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15196
scheduleWorkImpl @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15079
scheduleWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15041
scheduleTopLevelUpdate @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15512
updateContainer @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15550
(anonymous) @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:19567
unbatchedUpdates @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15421
renderSubtreeIntoContainer @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:19566
render @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:19631
(anonymous) @ index.js:13
maybeReady @ meteor.js?hash=cbcc712d51de4298c275e8dcf25c66c29914f19a:871
loadingCompleted @ meteor.js?hash=cbcc712d51de4298c275e8dcf25c66c29914f19a:883
modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:14104 The above error occurred in the <LoadableComponent> component:
in LoadableComponent (created by Route)
in Route
in Switch
in div
in Unknown (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in div (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 @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:14104
captureError @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:14895
renderRoot @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:14746
performWorkOnRoot @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15335
performWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15287
requestWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15196
scheduleWorkImpl @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15079
scheduleWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15041
enqueueSetState @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:10539
Component.setState @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:1264
update @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:36937
(anonymous) @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:36947
(anonymous) @ meteor.js?hash=cbcc712d51de4298c275e8dcf25c66c29914f19a:1167
Promise resolved (async)
Promise.then @ promise.js?hash=53619fb40e2ae3a1c694bc7fbad9be0adcfdb5fe:97
componentWillMount @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:36946
callComponentWillMount @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:10692
mountClassInstance @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:10748
updateClassComponent @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:12204
beginWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:12588
performUnitOfWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:14579
workLoop @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:14643
callCallback @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:4875
invokeGuardedCallbackDev @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:4914
invokeGuardedCallback @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:4771
renderRoot @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:14721
performWorkOnRoot @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15335
performWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15287
requestWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15196
scheduleWorkImpl @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15079
scheduleWork @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15041
scheduleTopLevelUpdate @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15512
updateContainer @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15550
(anonymous) @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:19567
unbatchedUpdates @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:15421
renderSubtreeIntoContainer @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:19566
render @ modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:19631
(anonymous) @ index.js:13
maybeReady @ meteor.js?hash=cbcc712d51de4298c275e8dcf25c66c29914f19a:871
loadingCompleted @ meteor.js?hash=cbcc712d51de4298c275e8dcf25c66c29914f19a:883
modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:2608 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 `LoadableComponent`.
at invariant (modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:2608)
at createFiberFromElement (modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:10086)
at reconcileSingleElement (modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:11887)
at reconcileChildFibers (modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:11991)
at reconcileChildrenAtExpirationTime (modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:12123)
at reconcileChildren (modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:12106)
at finishClassComponent (modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:12242)
at updateClassComponent (modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:12214)
at beginWork (modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:12588)
at performUnitOfWork (modules.js?hash=6e72b0fa6a3010a03af531d37813825d4bc8a90e:14579)
VM doesn't export components as defaults. One of the few decisions I'm still not sure if it was a good or bad idea (there's something to be said for and against it). So import('/imports/pages/About')
=> import('/imports/pages/About').About
While we're at it, you don't need react-loadable
since you can code split by component with the defer binding. Here are examples of deferred and lazy loading.
dear author, in this case, how to use deferred/laze with React Router 4 + Loading component ?
really need to work with React Router author, please help
You can use React Router normally, just importing the components created with VM. For lazily loading parts of the components, just use the defer
binding like this:
App({
render() {
<div>
<p>Content that will load with the component immediately</p>
<SmallComponentToLoadImmediatly />
<BigComponentThatWillBeLazilyLoaded b="defer: true" />
</div>
}
})
dear author, i just tried but error, i missed something ? :
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.
printWarning @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:2662
warning @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:2686
createElementWithValidation @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:2263
(anonymous) @ index.js:10
maybeReady @ meteor.js?hash=cbcc712d51de4298c275e8dcf25c66c29914f19a:871
loadingCompleted @ meteor.js?hash=cbcc712d51de4298c275e8dcf25c66c29914f19a:883
modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:2608 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.
at invariant (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:2608)
at createFiberFromElement (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:10086)
at reconcileSingleElement (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:11887)
at reconcileChildFibers (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:11991)
at reconcileChildrenAtExpirationTime (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:12123)
at reconcileChildren (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:12106)
at updateHostRoot (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:12301)
at beginWork (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:12590)
at performUnitOfWork (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:14579)
at workLoop (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:14643)
invariant @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:2608
createFiberFromElement @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:10086
reconcileSingleElement @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:11887
reconcileChildFibers @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:11991
reconcileChildrenAtExpirationTime @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:12123
reconcileChildren @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:12106
updateHostRoot @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:12301
beginWork @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:12590
performUnitOfWork @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:14579
workLoop @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:14643
callCallback @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:4875
invokeGuardedCallbackDev @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:4914
invokeGuardedCallback @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:4771
renderRoot @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:14721
performWorkOnRoot @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:15335
performWork @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:15287
requestWork @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:15196
scheduleWorkImpl @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:15079
scheduleWork @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:15041
scheduleTopLevelUpdate @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:15512
updateContainer @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:15550
(anonymous) @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:19567
unbatchedUpdates @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:15421
renderSubtreeIntoContainer @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:19566
render @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:19631
(anonymous) @ index.js:10
maybeReady @ meteor.js?hash=cbcc712d51de4298c275e8dcf25c66c29914f19a:871
loadingCompleted @ meteor.js?hash=cbcc712d51de4298c275e8dcf25c66c29914f19a:883
modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:14104 The above error occurred in one of your React components:
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 @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:14104
captureError @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:14895
renderRoot @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:14746
performWorkOnRoot @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:15335
performWork @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:15287
requestWork @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:15196
scheduleWorkImpl @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:15079
scheduleWork @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:15041
scheduleTopLevelUpdate @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:15512
updateContainer @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:15550
(anonymous) @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:19567
unbatchedUpdates @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:15421
renderSubtreeIntoContainer @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:19566
render @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:19631
(anonymous) @ index.js:10
maybeReady @ meteor.js?hash=cbcc712d51de4298c275e8dcf25c66c29914f19a:871
loadingCompleted @ meteor.js?hash=cbcc712d51de4298c275e8dcf25c66c29914f19a:883
modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:2608 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.
at invariant (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:2608)
at createFiberFromElement (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:10086)
at reconcileSingleElement (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:11887)
at reconcileChildFibers (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:11991)
at reconcileChildrenAtExpirationTime (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:12123)
at reconcileChildren (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:12106)
at updateHostRoot (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:12301)
at beginWork (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:12590)
at performUnitOfWork (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:14579)
at workLoop (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:14643)
here my project, please help ! https://github.com/lyquocnam/meteor-cafe/blob/master/imports/routes.js
import { Home } from './pages/Home';
import { About } from './pages/About';
it still error author:
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.
printWarning @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:2662
modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:2615 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.
at invariant (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:2608)
at createFiberFromElement (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:10086)
at reconcileSingleElement (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:11887)
at reconcileChildFibers (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:11991)
at reconcileChildrenAtExpirationTime (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:12123)
at reconcileChildren (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:12106)
at updateHostRoot (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:12301)
at beginWork (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:12590)
at performUnitOfWork (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:14579)
at workLoop (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:14643)
modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:14104 The above error occurred in one of your React components:
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 @ modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:14104
modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:15315 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.
at invariant (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:2608)
at createFiberFromElement (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:10086)
at reconcileSingleElement (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:11887)
at reconcileChildFibers (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:11991)
at reconcileChildrenAtExpirationTime (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:12123)
at reconcileChildren (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:12106)
at updateHostRoot (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:12301)
at beginWork (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:12590)
at performUnitOfWork (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:14579)
at workLoop (modules.js?hash=507fba0362f1fbcaeeafb60765c81e505a878e35:14643)
updated like tutorial:
import React from 'react';
import { Switch, Route } from 'react-router-dom'
import Loader from 'react-loadable';
import { Loading } from '/imports/components/Loading';
const loaderWrapper = (loader) => Loader({
loading: () => <Loading />,
loader
})
// const About = loaderWrapper(() => import('/imports/pages/About'))
// const Home = loaderWrapper(() => import('/imports/pages/Home'))
// const Unit = loaderWrapper(() => import('/imports/pages/Unit'))
// const Table = loaderWrapper(() => import('/imports/pages/Table'))
import { Home } from './pages/Home';
import { About } from './pages/About';
console.log(Home);
console.log(About);
export default () => (
<div>
<h1>App</h1>
<Switch>
<Route exact name="home" path="/" component={<Home />} />
<Route exact name="about" path="/about" component={<About />} />
</Switch>
</div>
)
I don't think it's a VM issue because I get the same error on your repo when I use a regular React class:
import React from "react";
export class Home extends React.Component {
render() {
return <h1>Home</h1>;
}
}
So first try to make it work without VM then using VM should be painless.
thanks author, i tried with boilerplate, it work, but 1 more question:
How to defer component in route like this code ?
import '../styles/index.scss';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import {Home} from './pages/Home';
App({
render() {
<BrowserRouter>
<Switch>
{/* How to defer Home Component in here ? */}
<Route exact path="/" component={Home} />
</Switch>
</BrowserRouter>
}
})
ps: i think this should be added to document too 👍
There is no need to defer the root component of the route. Your user would then see a blank page until the component is loaded.
On Wed, Nov 22, 2017 at 7:00 PM, Lý Quốc Nam [email protected] wrote:
i tried with boilerplate, it work, but 1 more question:
How to defer component in route like this code ?
import '../styles/index.scss';import { BrowserRouter, Route, Switch } from 'react-router-dom';import {Home} from './pages/Home'; App({ render() { <BrowserRouter> <Switch> {/* How to defer Home Component in here ? */} <Route exact path="/" component={Home} /> </Switch> </BrowserRouter> } })
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ManuelDeLeon/viewmodel-react/issues/37#issuecomment-346517409, or mute the thread https://github.com/notifications/unsubscribe-auth/AED31nMI0Wa9x5p5dV-YCz_DBvJihLRqks5s5NHNgaJpZM4Qg1KL .
Hi Manuel,
I'm upgrading to ReactRouter v4 and have a similar question to @lyquocnam. Perhaps a better example is how to defer the loading of LongTermsAndConditions
in the example below:
App({
render() {
<BrowserRouter>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/terms" component={LongTermsAndConditions} />{/* how to defer this*/}
</Switch>/
</BrowserRouter>
}
})
Simply putting b='defer: true'
on the Route
element would be the obvious way but that doesn't work. Is it still necessary to load them via a wrapper component like this:
App({
render() {
<BrowserRouter>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/terms" component={Defer} />
</Switch>/
</BrowserRouter>
}
})
Defer({
defer() {
switch (this.props.location.pathname) {
case '/terms': return <LongTermsAndConditions b="defer: true" />
...
}
},
render() {
this.defer();
}
});
or is there a better way?
To answer my own question, a better way to defer a route component is:
<Route path="/terms" render={(props) => <LongTermsAndConditions b="defer: true" {...props} />} />
But to get back to @lyquocnam's original question with react-loadable
, is there a way to show a placeholder element/component while the deferred component is loading? This would be a really nice addition to the brilliant defer
binding.