Pfthb

I am building a modular react app. But I am running into an issue where I can't dynamically import the routes of my app. Imagine this:

app
├── app.js
└── modules
├── module_1
│   └── routes.js
├── module_2
│   └── routes.js
└── module_3
└── routes.js


Imagine all the routes.js files containing something like this:

//modules/module_*/route.js
import React, Fragment from 'react';
import Route from 'react-router-dom';

export default () => 
 <Route path="/module/path" component=ModuleComponent>
;

I would then in my app.js to be able to do this:

const Routes = import('modules/**/routes.js');

const App = () => (
 <BrowserRouter>
 <Routes />
 </BrowserRouter>
);
export default App;

Right now im running a separate node script that creates an index file for al the routes.js files but this is getting tedious. And i am hoping there might be a better way to do

Create an index.js in each folder you want to export things from and in the structure you want.

You could for instance export * from './routes' in each of your modules and then in turn export these in your modules folder like

import route1 from './module_1';
import route2 from './module_2';
import route3 from './module_3';
export const routes = [route1, route2, route3];

Then in your app.js you import routes from './modules and apply these similiar to:

routes.map((route, i) => <Routes key="i"/>)

The npm package import-glob does exactly what I'm trying to achieve.

--edit---

The package basically does what @E. Sundin described in his post. You basically add the package as a pre-loader in your JavaScript files which allows you to do

import modules from "./foo/**/*.js";

And the package expands it into:

import * as module0 from "./foo/1.js";
import * as module1 from "./foo/bar/2.js";
import * as module2 from "./foo/bar/3.js";

modules = [module0, module1, module2]