How to do ESM dynamic export?

Question

The following exports code used to work when I set the project as CommonJS

let group: keyof typeof cloudFunctions;
// loop through all groups built above and export them
for (group in cloudFunctions) {
  if (group != null) {
    exports[group] = cloudFunctions[group];
  }
}

Now, I am trying to convert this to ESM Module so I use ESM export, instead of CJS exports but it keeps throwing me error.

let group: keyof typeof cloudFunctions;
// loop through all groups built above and export them
for (group in cloudFunctions) {
  if (group != null) {
    export[group] = cloudFunctions[group];
  }
}

The only way I can workaround it is to declare this statically and manually one by one OUTSIDE the for loop at the top-level.

Question: How can I adopt the similar structure I had in CJS in ESM so that I can programmatically export the functions stored inside a variable?

user_157247 · Answer

You can't do dynamic export with ESM. ESM requires exports to be statically analyzable.

Instead, you can export an object that you define dynamically:

export const someName = {...cloudFunctions};

...or perhaps just export cloudFunctions directly, since it appears to already have what you want to export:

export cloudFunctions;

Code importing from the module will not be able to directly import properties from the object you export; instead, it will have to import the object and then use the desired property. For instance, if I assume you do direclty export cloudFunctions:

...then to import (say) the whatever function, then assuming you used someName as the name of the export:

import { someName } from "./the-module";
const { whatever } = someName;

// ...code using `whatever`...

user_2490963 · Answer

Just faced the same issue. After some research I realized that ESM doesn't support dynamic export directly, i.e.

export initFunctionReturnsObject();

There are two options to provide dynamic interface, both require some extra code to import properly. Let's assume we have init.js with dynamic export object { a, b } generated by function initFunctionReturnsObject. Then we can

export default initFunctionReturnsObject() // generate { a, b }

import init from './init.js';
const { a, b } = init;

another way is to use dynamic import

const { default: { a, b } } = await import('./init.js');

export const obj = initFunctionReturnsObject()

import { obj } from './init.js';
const { a, b } = obj;

I hope this will help sort out how dynamic import might work in ESM

How to do ESM dynamic export?

2 Answers