viewmodel-react icon indicating copy to clipboard operation
viewmodel-react copied to clipboard

Published 20 hours ago • verified publisher icon ManuelDeLeon

How to use with react-loadable component ?

Open lyquocnam opened this issue 6 years ago • 12 comments 

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)

lyquocnam avatar Nov 16 '17 17:11 lyquocnam

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.

ManuelDeLeon avatar Nov 16 '17 17:11 ManuelDeLeon

dear author, in this case, how to use deferred/laze with React Router 4 + Loading component ?

lyquocnam avatar Nov 17 '17 00:11 lyquocnam

really need to work with React Router author, please help

lyquocnam avatar Nov 19 '17 03:11 lyquocnam

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>
  }
})

ManuelDeLeon avatar Nov 20 '17 18:11 ManuelDeLeon

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

lyquocnam avatar Nov 21 '17 01:11 lyquocnam 

import { Home } from './pages/Home';
import { About } from './pages/About';

ManuelDeLeon avatar Nov 21 '17 15:11 ManuelDeLeon

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>
)

lyquocnam avatar Nov 21 '17 23:11 lyquocnam

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.

ManuelDeLeon avatar Nov 22 '17 17:11 ManuelDeLeon

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 👍

lyquocnam avatar Nov 23 '17 02:11 lyquocnam

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 .

ManuelDeLeon avatar Nov 23 '17 04:11 ManuelDeLeon

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?

wildhart avatar Dec 03 '17 07:12 wildhart

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.

wildhart avatar Dec 05 '17 06:12 wildhart