Bug: can't use @stream-io/video-react-sdk in island

[andreasteich]

Hello,

I'm facing an issue regarding integration for @stream-io/video-react-sdk within an Island component I try to build. It seems that the react components aren't compatible out-of-the-box (I guess it's normal when using preact) but I don't know how to integrate them properly.

Can someone help me?

Ive alreay adjusted the "Imports" like that: "imports": { "$fresh/": "https://deno.land/x/fresh@1.6.8/", "preact": "https://esm.sh/preact@10.19.6", "preact/": "https://esm.sh/preact@10.19.6/", "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2", "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1", "tailwindcss": "npm:tailwindcss@3.4.1", "tailwindcss/": "npm:/tailwindcss@3.4.1/", "tailwindcss/plugin": "npm:/tailwindcss@3.4.1/plugin.js", "$std/": "https://deno.land/std@0.216.0/", "react": "https://esm.sh/preact/compat", "react-dom": "https://esm.sh/preact/compat", "react/jsx-runtime": "https://esm.sh/preact/compat", "@stream-io/video-react-sdk": "https://esm.sh/@stream-io/video-react-sdk?external=react,react-dom,react%2Fjsx-runtime" }

Without any success. I don't know what I'm missing or doing wrong. After serving the fresh app the following error appears in the Logs:

Uncaught (in promise) SyntaxError: The requested module 'react/jsx-runtime' does not provide an export named 'jsx' at https://esm.sh/v135/@stream-io/video-react-bindings@1.0.0/X-ZS9yZWFjdCxyZWFjdC1kb20scmVhY3QvanN4LXJ1bnRpbWU/denonext/video-react-bindings.mjs:2:8

[sanekb]

the react components aren't compatible out-of-the-box

Yes, it is. The main idea is to use aliases when esm.sh does the build, and mark preact as external so that its version is determined when esbuild in fresh compiles islands a similar situation was discussed here: #606

So, the correct import option will be as follows: https://esm.sh/@stream-io/video-react-sdk?target=esnext&alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat&external=preact&bundle-deps

a couple of comments

• if don't use target=esnext, browser will try to reach node:process which will end in error
• in case with video-react-sdk bundling to one file required via bundle-deps otherwise esm gives module not found error

tiny exampe using fresh 2 and official example from stream docs https://github.com/sanekb/stream-react-to-preact

[andreasteich]

Thank you so much @sanekb ! Give it a try right away! I think I understand the problem, but would like to dig deeper into this whole esm alias dependencies topic. Do you have further more resources for me to help me educate?

Best regards

[sanekb]

Do you have further more resources

Unfortunately I don't have anything like that. I'm not sure they can even exist. I've only been using headlessui with fresh for a week and all my knowledge is limited to using esbuild's aliases while require esm.sh :(