How can I list source folder contents in React or create-react-app?

Question

I'm writing a React app using create-react-app.

Since I can do:

import LocalClass from "./localfolder/LocalClass.js"

and even (using dynamic import):

import('./localfolder/LocalClass.js').then((module) => { /* ... */ })

is there a way to list localfolder contents, so I can dynamically import the contained files?

The listing should happen at compile or bundling time, not at runtime (I'm thinking about an automatic menu creation feature).

The folder may contain plain classes too (i.e. not React components); I guess this is a matter of the bundler, but I'm not sure.

AKX · Accepted Answer · 2020-03-15 12:06:46Z

2

Since CRA uses Webpack under the hood, you could use require.context() to enumerate all loadable modules in a given path.

answered Mar 15, 2020 at 12:06

AKX

171k16 gold badges147 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

watery Over a year ago

Interesting. I put together some experimental code, though I hit a roadblock on dynamic imports.

keikai · Accepted Answer · 2020-03-15 12:03:00Z

0

Although it's kind of open-based, after some investigation

I found a lib: react-dynamic-import

Usage:

const loader = f => import(`./dynamic/${f}.js`);

|_ dynamic
|  |_ realComponent-en.js
|  |_ realComponent-eu.js
|  |_ realComponent-kn.js
|_ container.js <-- working file

Refer:

react document code-splitting
related QA

answered Mar 15, 2020 at 12:03

keikai

15.3k10 gold badges56 silver badges73 bronze badges

6 Comments

watery Over a year ago

Thanks, I'm giving it a look. I may have non-React classes though - I'll edit the question.

keikai Over a year ago

@watery you can use regex for the filename based filter for the bundler. And feel free to leave your feedback if you have further problems using the method mentioned above.

keikai Over a year ago

Did that post solved your problem? Kindly inform me if you have further questions about it.

watery Over a year ago

Actually, I'm experimenting with AXK's answer.

keikai Over a year ago

@watery Is this post still helpful for you? I'm cleaning my zero posts, trying to find out whether to remove this one or not

|

Collectives™ on Stack Overflow

How can I list source folder contents in React or create-react-app?

2 Answers 2

1 Comment

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related