We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
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
loadable-components/babel
Hello. An error occurred:
Error: loadable-components: modules entry is missing, your are probably missing loadable-components/babel
An error occurs when I create an array of route objects dynamically, rather than statically.
Example, work:
const routes = [ { path: '/', exact: true, name: 'Home', component: loadable(() => import(/* webpackChunkName: "Home"*/ './Home')) }, { path: '/contact', exact: true, name: 'contact', component: loadable(() => import(/* webpackChunkName: "Contact"*/ './contact')), } ];
export const RootRouter = () => { return ( <div> <Link to="/"> home </Link> <br/> <Link to="/contact"> contact </Link> <div className="container"> <Switch> { routes.map(route => <Route key={'route-'+route.name} {...route} />) } </Switch> </div> </div>) };
The route constant contains this data:
[1] routes: [ { path: '/', [1] exact: true, [1] name: 'Home', [1] component: [1] { [Function: LoadableComponent] [1] load: [Function: load], [1] Component: null, [1] loadingPromise: null, [1] '@@loadable-components/loadable': [Function], [1] componentId: './Home' } }, [1] { path: '/contact', [1] exact: true, [1] name: 'contact', [1] component: [1] { [Function: LoadableComponent] [1] load: [Function: load], [1] Component: null, [1] loadingPromise: null, [1] '@@loadable-components/loadable': [Function], [1] componentId: './contact' } } ]
And here is an example that does not work because it does not create componentId:
import React, {Component} from 'react'; import {Link, Route, Switch} from 'react-router-dom'; import * as modules from '../modules/index'; import loadable from 'loadable-components'; const MainRoute = ({component: Component, ...rest}) => { try { if (rest.hasOwnProperty('routes') && rest.routes) { return ( <Switch> <Route exact={true} {...rest} render={matchProps => { return ( <Component {...matchProps} /> ) }}/> { rest.routes.map((item, index) => ( <MainRoute key={`${item.path}-${index}`} // exact={item.exact} path={item.path} component={item.component} routes={item.children || null} />)) } </Switch> ) } else { return ( <Route exact={true} {...rest} render={matchProps => { return ( <Component {...matchProps} /> ) }}/> ) } } catch (error) { console.error(error); } }; const createRoutes = (modulesRoutes, newRoutes, moduleName) => { for (let i = 0; i < modulesRoutes.length; i++) { if (modulesRoutes[i].hasOwnProperty('load')) { console.log('modulesRoutes[i].load:',modulesRoutes[i].load); newRoutes.push({ exact: true, name: modulesRoutes[i].name, path: modulesRoutes[i].path || console.error(`Error: in the module ${moduleName} in one of the routes there is no property "path".`), component: loadable( modulesRoutes[i].load), }) } else if (modulesRoutes[i].hasOwnProperty('component')) { newRoutes.push({ exact: true, name: modulesRoutes[i].name, path: modulesRoutes[i].path || console.error(`Error: in the module ${moduleName} in one of the routes there is no property "path".`), component: modulesRoutes[i].component }) } else { console.error(`Error: in the module ${moduleName} there is no component at the address ${modulesRoutes[i].path}. Make sure that you added the "load: () => import('...')" property with the component import or React component. `); } if (modulesRoutes[i].hasOwnProperty('children')) { newRoutes[newRoutes.length - 1].children = [...createRoutes(modulesRoutes[i].children, [], moduleName)] } } return newRoutes }; let routes = []; Object.entries(modules).map(([key, value]) => { if (value.hasOwnProperty('routes')) { routes = [...routes, ...createRoutes(value.routes, [], key)]; } else { console.error(`ERROR:in the module "${key}" there is no property "routes". Add the property "routes" to the module "${key}" and determine at least one route otherwise the module will be inaccessible to users.`) } }); export const RootRouter = () => ( <div> <Link to="/"> home </Link> <br/> <Link to="/contact"> contact </Link> <div> <Switch> <Switch> { routes.map(route => <Route key={`route-${route.name}`} {...route} />) } </Switch> </Switch> </div> </div> );```
[ { exact: true, [1] name: undefined, [1] path: '/', [1] component: [1] { [Function: LoadableComponent] [1] load: [Function: load], [1] Component: null, [1] loadingPromise: null, [1] '@@loadable-components/loadable': [Function] } }, [1] { exact: true, [1] name: undefined, [1] path: '/contact', [1] component: [1] { [Function: LoadableComponent] [1] load: [Function: load], [1] Component: null, [1] loadingPromise: null, [1] '@@loadable-components/loadable': [Function] } } ]
The text was updated successfully, but these errors were encountered:
Can you run babel on this file:
babel
And check if modules is correctly added. If not, you can still add it by yourself: https://github.com/smooth-code/loadable-components#configuring-babel
modules
Sorry, something went wrong.
No branches or pull requests
Hello. An error occurred:
An error occurs when I create an array of route objects dynamically, rather than statically.
Example, work:
The route constant contains this data:
And here is an example that does not work because it does not create componentId:
The route constant contains this data:
The text was updated successfully, but these errors were encountered: