Funport: True Dynamic Imports in webpack

Published 📅: ....
Last modified 📝: ....

Share this post on Bluesky See discussion on Bluesky

If you've ever wanted to leverage import() from the browser (or node process) within an application that uses webpack - you have probably realized that webpack "hijacks" the import() function and replaces it with its own implementation. This is great for static imports, but what if you want to dynamically import a module that webpack doesn't know about at build time?

I was running into this limitation the other day, and couldn't really find any good resources out there that helped me to workaround the limitation.

// Where the fun begins
let funport = new Function('url', 'return import(url)');

let {createElement} = await funport('https://esm.sh/react');

function App() {
  return createElement('h1', null, 'Hello, World!');
};

Funport: True Dynamic Imports in webpack

Funport: True Dynamic Imports in webpack

Tags:

Related Posts

Development

Related Posts

Development

Next.js