Dynamic imports?

Is there a similar straightforward approach to import modules dynamically in SolidJS? In Svelte it's as simple as:

onMount(async () => {
 const myModule = await import("my-module");
})

// Which is pretty much equivalent to in a regular ESM import:
import MyModule from "my-module";

onMount(async () => {
 const myModule = await import("my-module");
})

// Which is pretty much equivalent to in a regular ESM import:
import MyModule from "my-module";

It helps with non-ssr-friendly module imports. I was wondering if SolidJS has something similar? :))

8 Replies

bigmistqke 🌈•2mo ago

I think https://docs.solidjs.com/reference/component-apis/lazy is what you are looking for

Blankeos•2mo ago

Thanks, I couldn't find examples of it being used for just plain javascript modules tho. Not components. For instance:

const heic2Any = await import("heic2any");

const conversionResult = await heic2Any({ blob });

const heic2Any = await import("heic2any");

const conversionResult = await heic2Any({ blob });

bigmistqke 🌈•2mo ago

A ye u can just use await import Vite will resolve relative imports and create a chunk for each import U get proper typing for relative impors And u can also use it for external dynamic imports too, it's a web feature Import esm modules from esm.sh for example That's the secret sauce of why u can import external modules with the solid playground

Blankeos•2mo ago

Hmm yeah wtf, it worked. I cannot confirm if this is actually importing client-side tho lol.

Blankeos•2mo ago

-----------

// something.ts
import { isServer } from 'solid-js/web';

console.log('module has loaded. Server:', isServer);
export default function something() {
  console.log('something happened!');
}

// something.ts
import { isServer } from 'solid-js/web';

console.log('module has loaded. Server:', isServer);
export default function something() {
  console.log('something happened!');
}

Alright yup, it does work. The screenshot above is what happens if I do a regular ESM Import (isomorphic):

// +Page.tsx
export default Page() {
   something();
   ...
}

// +Page.tsx
export default Page() {
   something();
   ...
}

But when I do the await import (client-side only):

// +Page.tsx
export default Page() {
   onMount(async () => {
      const { default: something } = await import("./something");

      something();
   }) 
}

// +Page.tsx
export default Page() {
   onMount(async () => {
      const { default: something } = await import("./something");

      something();
   }) 
}

The log on the console (in VSCode) won't be there, which means it's only on client-side (browser).

bigmistqke 🌈•2mo ago

this is because onMount will not be called on the server i think you should be able to await import on the server too i think, as long as ur in esm-mode. both dynamic and static imports are part of esm.

Blankeos•2mo ago

Didn't know this before. Thanks! I was assuming it was a Svelte-specific feature.

bigmistqke 🌈•5w ago

You are welcome 😁

Gaming

Programming

Dynamic imports?