Dynamically import module in TypeScript

Question

What is the TypeScript way of loading modules dynamically (path to the module is known at runtime)? I tried this one:

var x = "someplace"
import a = module(x)

But it seems that TypeScript compiler would like to see path as a string in import/module at compile time:

$ tsc test.ts 
/tmp/test.ts(2,19): error TS1003: Identifier expected.
/tmp/test.ts(2,20): error TS1005: ';' expected.

I know I can for example directly use RequireJS (if I use amd module format), but that doesn't feel right to me - it's solution for one particular library.

With TypeScript 0.9.1 instead of 'module' you now need to use 'require' Try changing your import to: import a = require(x) — hnuecke
– hnuecke, Commented Aug 17, 2013 at 20:30

Macil · Accepted Answer · 2019-11-12 21:20:55Z

96

ES proposal dynamic import is supported since TypeScript 2.4. Document is here.

import function is asynchronous and returns a Promise.

var x = 'someplace';
import(x).then((a) => {
  // `a` is imported and can be used here
});

Or using async/await:

async function run(x) {
  const a = await import(x);
  // `a` is imported and can be used here
}

edited Nov 12, 2019 at 21:20

Macil

3,7261 gold badge22 silver badges20 bronze badges

answered Jul 24, 2017 at 14:22

aleung

10.4k4 gold badges62 silver badges73 bronze badges

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

1 Comment

Marcos Pereira Over a year ago

Definitely wouldn't have guessed this one!

basarat · Accepted Answer · 2019-03-25 10:31:19Z

20

You need to specify a hard coded string. Variables will not work.

Update

JavaScript now got dynamic imports. So you can do import(x) :https://developers.google.com/web/updates/2017/11/dynamic-import

TypeScript supports it as well. That said you would still want the argument to be statically analyzable for type safety e.g.

const x = 'someplace';
import(x).then((a) => { // TypeScript knows that `x` is 'someplace' and will infer the type of `a` correctly
});

edited Mar 25, 2019 at 10:31

answered Aug 8, 2013 at 5:57

basarat

278k60 gold badges475 silver badges528 bronze badges

Comments

Ryan Soderberg · Accepted Answer · 2022-09-12 18:32:25Z

7

If you want to extract the type from a default export dynamically it can be done like so:

    const dynamicImport = await import('path-to-import')
    const typedDefaultImport = dynamicImport.default

answered Sep 12, 2022 at 18:32

Ryan Soderberg

7889 silver badges26 bronze badges

Comments

equiman · Accepted Answer · 2023-09-20 17:23:50Z

1

I've tried the option without extension, but for me fails in javascript and typescript side going directly to the catch.

So I've made a workaround including an additional parameter to my function that is 'js' by default.

export const getPackageConfiguration = async (cmdr: Pick<CommanderPackage, 'cmd'>, ext: 'js' | 'ts' = 'js') => {
  try {
    const config = await import(`./managers/${cmdr.cmd}.${ext}`)
    return config?.default
  } catch {
    return {}
  }
}

It work well when I build my files with tsc command generating js files. And when I run my test (typescript side), I call it with 'ts' to avoid import errors.

await getPackageConfiguration('npm', 'ts')

answered Sep 20, 2023 at 17:23

equiman

8,1622 gold badges49 silver badges48 bronze badges

Collectives™ on Stack Overflow

Dynamically import module in TypeScript

4 Answers 4

1 Comment

Update

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Update

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related