Using Islands with third party components?

[KjellConnelly]

I've got Islands working using my own client components with signals, but using solid-headless, it's not working. I am wondering if there's a solution for wrapping components like this? For instance, I tried manually doing

// WrappedPopover.tsx
export { Popover as default } from "solid-headless"

// index.tsx
import { unstable_island } from 'solid-start'
const WrappedPopover = unstable_island(()=>import("./WrappedPopover"))

export default function App() {
  return (
    <div>
      <WrappedPopover>
        {/* other elements that were also exported */}
      </WrappedPopover>
    </div>
  )
}

Two outcomes occur. If I directly wrap the headless elements, then my entire page shows blank.

But if I import a component inside of index.tsx which uses unstable islands to import, the page shows, but the component becomes static and has no reactivity.

I've asked a similar question on the solid-headless github page, but thought I'd ask here too as I'm sure I won't be the only one using external libraries for things like UI.

P.S. After messing with this some more today, I've noticed that when the UI appears and is not reactive, it continues to not work on npm run dev, but does work when I use npm run build && npm run start. Not sure why...

[KjellConnelly]

Finally got it working. Turns out that I had imported a solid component as a non-default export which was from a Server component. I think in the Documentation repo here, they do export the <A> component as default from solid-start, and have to import it into an island. So I ended up having to do the same thing.

Before:

App.tsx

• const FeaturesDesktop = unstable_island(()=>import("./FeaturesDesktop")
• export function FeatureComponent(props) {
• function FeaturesMobile() {

FeaturesDesktop.tsx

• import { FeatureComponent } from './App'

After:

App.tsx

• const FeaturesDesktop = unstable_island(()=>import("./FeaturesDesktop")
• import FeatureComponent from './FeatureComponent'
• function FeaturesMobile() {

FeaturesDesktop.tsx

• import FeatureComponent from './FeatureComponent'

FeatureComponent.tsx

• export default function FeatureComponent(props) {

Explanation

Poor architecture, but whatever - App.tsx uses the Mobile Features component, and imports the Desktop Features Component as an island. Both Mobile and Desktop show the same FeatureComponent, but it is displayed differently. On Mobile, it is static, and on Desktop, it is reactive.

I may have missed a few steps along the way, but this is the solution I have come up with and hopefully it helps others who get stuck in the same situation.

[ryansolid]

Yeah the provided API has a number of issues. Which is why it is still very much under review. The need for default is basically untenable for the final API. We still have some options to work through.