Error: loadable-components: modules entry is missing, your are probably missing loadable-components/babel

[FMakareev]

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

[gregberge]

Can you run babel on this file:

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')),
    }
];

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