React imports

Panel
1

Hello,

in my craziest dream, i would like to get to import a react three fiber app within a ReactComponent.

I am so far working with this import map


    _importmap = {
        "imports": {
            "react": "https://esm.sh/react@18.3.1?deps=react@18.3.1",
            "react-dom": "https://esm.sh/react-dom@18.3.1?deps=react@18.3.1&dev",
            "react-scripts": "https://esm.sh/react-scripts@5.0.1?deps=react@18.3.1",
            "three": "https://esm.sh/three@0.158.0",
            "@types/three": "https://esm.sh/@types/three@0.158.0",
            "@react-three/fiber": "https://esm.sh/@react-three/fiber@8.15.12?deps=react@18.3.1,three@0.158.0",
            "@react-three/drei": "https://esm.sh/@react-three/drei@9.92.0?deps=react@18.3.1,three@0.158.0",
        },
    }

I can get three and fiber to work, but i need drei to get utils to have interactivtiy with the 3D scene.

When i use a drei object in my .js, i see in my chrome import map a react 19.2.0 showing up in addition to the 18.3.1, with a ton of drei dependancies that are expected, leading to errors.

My question is, drei has a lot of dependancies, i expect some of them not having mapped the deps=react@18.3.1 properly. How can i force them one by one using the import map? Is it possible to unpack the drei esm.sh link in the import map? what would be your approach here?

Thanks
Thibault

2

Honestly, this is likely stretching the limits of the importmap approach. I’d suggest, defining an actual package.json and manually compile things, though I wouldn’t mind supporting a package.json defined alongside the extension natively.

3

Ok thanks for you answer, i will try it out and give feedbacks here

4

Hey,

i could indeed get it to work that way. I however have a question about the documentation you pin. Here,

import panel as pn

from panel.custom import JSComponent

pn.extension()

class ConfettiButton(JSComponent):

    _esm = 'confetti.js'

ConfettiButton().servable()

should it be confetti.js or the ConfettiButton.bundle.js we created? i had it working with the second, but adding React and createRoot too. So i might have overstepped and done the bundle while i could have done it more easily.

Thanks
Thibault