How to import javascript from filename variable?

Question

Is it possible to import javascript from a filename stored in a variable to be determined at runtime, something like below?

const mydir="./bobs_pictures.js"
import pictures from mydir;

Does this answer your question? ES6/TypeScript Dynamic Imports - Slow launch time because of static imports (Nodejs CLI) — jonrsharpe
– jonrsharpe, Commented Nov 10, 2021 at 13:42
Does this answer your question? How use variable in the path while import typescript — Markiesch
– Markiesch, Commented Nov 10, 2021 at 13:43
If you're talking about frontend, different bundlers have different methods of achieving wildcard imports (e.g. require.context for Webpack, import.meta.glob for Vite/Esbuild). — AKX
– AKX, Commented Nov 10, 2021 at 13:43

Szaman · Accepted Answer · 2021-11-10 13:46:38Z

1

You can achieve that using dynamic imports, which run asynchronously.

const importPromise = import(mydir);
importPromise.then((module) => {
  // do something
});

If you want to use it across a function / module, note that it must be an async function, and then you'll be able to use it in a regular way with await:

async () => {
  const mydir = "./bobs_pictures.js";
  const module = await import(mydir);
}

PS. please check browser compatibility. You might need to use an external tool in order to run this on older browsers.

answered Nov 10, 2021 at 13:46

Szaman

2,4161 gold badge19 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

How to import javascript from filename variable?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related