Unexpected token '.' react-quiz-component library

[dull merlin]

I have reproduced the issue here: https://codesandbox.io/p/sandbox/astro-mdx-forked-tphlyx?file=%2Fsrc%2Fpages%2Findex.mdx%3A1%2C1

Tried to work it out in ai-support here: https://discord.com/channels/830184174198718474/1168211097015292025

Made an issue in the library here and the awesome maintainer @mossy herald is supporting as well: https://github.com/wingkwong/react-quiz-component/issues/150

Is there any vite/astro config I can use to avoid this issue?

Thanks in advance for any suggestions I've been stuck for a while now. 🙂

[merry star]

Try using client:only="react" https://docs.astro.build/en/reference/directives-reference/#clientonly You will need to move that Quiz into a separate React component to do that

[dull merlin]

a good catch! I forgot to add that in the reproduction sandbox but I already tried that and client:load

I will fix the sandbox to be more like my env which has it as a separate react component

here is the updated sandbox with the same error:

https://codesandbox.io/p/sandbox/astro-mdx-forked-tphlyx?file=%2Fsrc%2Fpages%2Findex.mdx%3A10%2C1

[dull merlin]

I also tried to edit the vite config: #1168211097015292025 message

[merry star]

Ah you're using preact, try it with react integration

[dull merlin]

oh my! another great catch. Thank you friend!

I'm not using preact in the actual project that was just a mistake when I grabbed a template. Remaking the sandbox to repro and able to reproduce here: https://codesandbox.io/p/sandbox/determined-sea-cj4grm?file=%2Fsrc%2Fpages%2Findex.astro%3A4%2C65

[merry star]

I see - I tried that library and it only works with client:only="react" if I use it in an .astro page, not .mdx. Just importing it in .mdx results in that .error (and any other client directive from .astro).

So as a workaround, you can wrap the <Quiz client:only="react" /> in an Astro component and use that in your mdx instead. Doesn't seem to build though unfortunately

[dull merlin]

I think I tried that too but let me try again and I'll get back to you, thanks so much again for the helpful suggestions and support.

[mossy herald]

hello @dull merlin . you may refer the below sandbox which I've modified based on yours.

https://codesandbox.io/p/sandbox/white-glade-mf9hdr