9

I would like to know if it is possible to dynamically import a module installed via npm install.

Something like:

import("{ AsyncStorage } from react-native ???").then((module) => {
  // do something with module
});

All the examples I found so far are just importing self written ES modules...

Melkis H.
  • 179
  • 2
  • 10
  • 1
    https://stackoverflow.com/questions/10914751/loading-node-js-modules-dynamically-based-on-route – Hyyan Abo Fakher Jul 03 '18 at 13:27
  • require is awesome but I prefer to stick with ES module imports. BTW I am not in a nodejs environment – Melkis H. Jul 03 '18 at 13:31
  • 2
    In which enviroment do you want to do that `import`? client side, server side, in react, ... ? What tool do you use to compose your project? – t.niese Jul 03 '18 at 13:54
  • I am trying to reuse some modules of a legacy react-native application in a react project. I am using webpack to bundle the react application – Melkis H. Jul 03 '18 at 14:03
  • It should either be `import("react-native").then(({AsyncStorage: module}) => …)` or `import("react-native/AsyncStorage").then(module => …)` – Bergi Jul 03 '18 at 14:17
  • What does the dynamic import have to do with the fact the module was installed via npm? – Bergi Jul 03 '18 at 14:19
  • The problem is that, while doing dynamic import with a module installed via _npm_ , webpack seems to fail to load other files imported by the module I am importing. Example with _react-native_ (using your first proposition): it imports react-native but complains about any other file imported by _react-native_, like _WebView_ for example – Melkis H. Jul 03 '18 at 14:51
  • Please state whether you intend to do this in node.js or in a browser environment. ECMAScript Modules are still experimental in node.js. Additionally, dynamic imports are still only at stage 3: [proposal-dynamic-import](https://github.com/tc39/proposal-dynamic-import) and may not have support in whereever you are implementing. – zero298 Jul 03 '18 at 15:04

2 Answers2

3

You should do it like this

// With normal promises
import('react-native').then(({ AsyncStorage }) => {
 // Do something with the module
})

// Async/await (You must add this code inside of an async function or use ecmascript module code)
const { AsyncStorage } = await import('react-native')
// Do something with the module
AngelNext
  • 158
  • 2
  • 9
-3

The real dynamically import in node_modules based on Environment variables (PD_PLATFORM) or command line parameter is implemented here:

https://github.com/tagspaces/tagspaces-common/tree/develop/packages/dynamic-packages-loading

usage in npm script: npx @tagspaces/dynamic-packages-loading ./ -p node -> this will install in node_modules nodeDependencies from package.json

npx @tagspaces/dynamic-packages-loading ./ -p web -> install webDependencies

This install script will copy index.js after npm install based on process.env.PD_PLATFORM https://github.com/tagspaces/tagspaces-common/blob/develop/packages/platforms/package.json#L8

sytolk
  • 7,223
  • 3
  • 25
  • 38