Dynamically import JavaScript module using ES6 syntax?

Josh M.

Is ES2015+, how can I dynamically import a module?

E.g. instead of...

import {SomeClass} from 'lib/whatever/some-class';

I don't know the path at runtime, so I want to I have the path stored in a variable, and I want to import a specific thing from that module:

function doDynamicStuff(path) {
    let importedThing = ...; //import * as importedThing from path;
    let thingIReallyWant = importedThing.someExportedVariable;

    ...
}

I'm not sure what syntax to use, or if it's possible to do this at all. I tried using let importedThing = require(path); but we're not using RequireJS.

Zhegan

ES2015 does not support dynamic imports by design.

In current JavaScript module systems, you have to execute the code in order to find out what the imports and exports are. That is the main reason why ECMAScript 6 breaks with those systems: by building the module system into the language, you can syntactically enforce a static module structure.

...

A module’s structure being static means that you can determine imports and exports at compile time (statically) – you only have to look at the source code, you don’t have to execute it.

From ECMAScript 6 modules: the final syntax

To dynamically import module you have to explicitly use module loaders (like RequireJS or SystemJS)

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

In the `import` syntax of ES6, how is a module evaluated exactly?

how to use node module with es6 import syntax in typescript

In typescript, how can I import a plain javascript file with a default export using es6 syntax?

Can I dynamically import an ES6 module?

linq javascript library with typescript es6 import syntax

How to import class using ES6 syntax? (without Babel)

How to import jquery using ES6 syntax?

Converting jsx with ES6 import syntax using reactify

How to import .html fragment using es6 syntax in TypeScript

How to import pg-promise using ES6 syntax?

Add a module in in ES6 using import instead of require

How to import everything from a module in react using es6?

using the ... spread syntax in javascript es6 named exports

Correct syntax to import constants in ES6

using brackets with javascript import syntax

How to import Firebase Firestore into a create-react-app project using ES6 syntax

Import multiple components in vue using ES6 syntax doesn't work

ES6: import module from URL

Electron ES6 module import

Is it possible to es6 import a commonjs module?

ES6 module import and dependency management

Import Module in ES6 Class Function

Import ES6 module into global scope

Import es6 module in repl

module specifier in es6 import and export

How to reimport module with ES6 import

How to dynamically execute/eval JavaScript code that contains an ES6 module / requires some dependencies?

Navigating through Typescript references in Webstorm using ES6 module syntax

How do I use Javascript ES6 ES2015 modules to export / import constants directly to the import module namespace?