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/[email protected][email protected]",
            "react-dom": "https://esm.sh/[email protected][email protected]&dev",
            "react-scripts": "https://esm.sh/[email protected][email protected]",
            "three": "https://esm.sh/[email protected]",
            "@types/three": "https://esm.sh/@types/[email protected]",
            "@react-three/fiber": "https://esm.sh/@react-three/[email protected][email protected],[email protected]",
            "@react-three/drei": "https://esm.sh/@react-three/[email protected][email protected],[email protected]",
        },
    }

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 [email protected] 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