ES modules dynamic import issue

[coatlicue89]

TLDR;

Seems that dynamic imports are not working, previously it was a thing of the google closure compiler not supporting it but now I think it is supported according to https://github.com/google/closure-compiler/wiki/JS-Modules#dynamic-import-expressions.

In this case I am using Rainbow kit a library to connect and use a crypto wallet. This library is using dynamic imports to fetch svg’s https://github.com/rainbow-me/rainbowkit/blob/2e6bb8ff3850eb4e341d82b77d52b18df4bfd698/packages/rainbowkit/src/wallets/walletConnectors/metaMaskWallet/metaMaskWallet.ts#L53.

The issue happens when you click the connect button and the main modal appears.

To demonstrate it I created this demo that has 2 “Connect Wallet” buttons side by side.

1. One using the Rainbow kit npm library as shadow cljs users guide indicates (using npm packages). Button source code
2. Other using a compiled version of this library that uses a babel plugin to remove the dynamic imports (babel-plugin-transform-dynamic-imports-to-static-imports). Check the vite.config.ts file. Button source code

1. This is the result when using the library as an npm package

As you can see the wallet icons are missing

2. This is the result when removing the dynamic imports

As you can see the wallet icons are not missing

[thheller]

This is not supported.

The Closure Compiler supported dynamic import is still rather buggy and limited. But even if it supported this perfectly, the support for importing .svg is still missing. This is not a browser feature, and therefore not supported at all. You can setup webpack as described here. Or any other bundler the library expects should also work.

[coatlicue89]

Hi, the npm module is doing a compilation step for svg's making a js file. You can check it in the dist files of the npm module https://www.npmjs.com/package/@rainbow-me/rainbowkit?activeTab=explore in the following path dist / wallets / walletConnectors / chunk-DSGPFCE6.js line 35

And the compiled svg image

So dynamic imports are still not supported in shadow-cljs?

[jorenbroekema]

There is also a use case where certain libraries will dynamically import from resources such as a CDN.

For example:

const CDN_URL = `https://ga.jspm.io/npm:${package}@${version}/${entrypoint}`;

const mod = await import(CDN_URL);

Bundlers in this case shouldn't even attempt to bundle the dynamic import, it doesn't need to analyze it and in the above example the CDN_URL variable isn't statically analyzable to begin with because it's a variable rather than a raw string.

Rollup will just ignore bundling such a dynamic import and give the user a warning, which in this case is desirable.
Webpack and Vite will error unless you wrap the import parameter in an ignore statement:

const CDN_URL = `https://ga.jspm.io/npm:${package}@${version}/${entrypoint}`;

const mod = await import(/* @vite-ignore */ /* webpackIgnore: true */ CDN_URL);

I think it would be cool if shadow-cljs could add a way to ignore certain dynamic imports similar to Vite or Webpack, or at least some way to prevent it from throwing an error (e.g. in Rollup you can turn the warning off as well).

Even better of course if this bundler supports dynamic imports but until then this would already be a quick win for dynamic imports that are not intended to be analyzed by bundlers.