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>
);```
The route constant contains this data:
[ { 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] } } ]
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent