Usage of astro-dynamic-import

[narduin]

Hello,

I'm trying to use astro-dynamic-import but I don't understand the example provided.
I have made a "builder" inside a CMS (directus) and I'm trying to import the right component for the right block in astro. Your integration seems ideal but I'm stuck with implementation.

Could you prrovide a more detailed example please?
Thanks a lot!

[lilnasy]

Sure!

It would help if you could elaborate on what you've tried so far, and where you got blocked by lack of information.

[narduin]

Hey!
I've successfully used the integration.

I created a component acting as a "component switcher". It takes an object with the data as a prop. Based on a "name" property, it dynamically imports the right component. Works perfectly (see example below).

The only thing I noticed (I feel it's expected) is that the scoped styles from imported components are no longer applied. Only is:inline is working…

---
import dynamic from "astro:import"

let componentName = ''

const { item } = Astro.props

function setComponent(component) {
	switch (component) {
		case 'bock_richText':
			componentName = 'BlockRichText'
			break;
		case 'block_card':
			componentName = 'BlockCard'
			break;
	
		default: 'BlockRichText'
			break;
	}
}
setComponent(item.name)

const toImport = `components/${componentName}.astro`
const Component = await dynamic(toImport)
---

<Component content={item}>

[lilnasy]

Scoped styles are expected to be applied.

Could you try installing astro-adds-to-head, adding it as an integration, and adding export const addsToHead = true to the component whose code you shared? It would help me confirm or rule out one issue that I think could be the cause.

[narduin]

Yep that fixes the styles!