Does iTwinUI work with Qwik apps?

[r100-stack]

I was trying to add iTwinUI react components in a demo Qwik app. They say that we can include React UI libraries in Qwik apps using the qwikify integration.

However, when following the above guide, I was not able to add iTwinUI React components to the project. I constantly keep getting different errors. One of them is:

After getting this error, I thought to import directly from cjs instead of the root.

- import { IconButton } from "@itwin/itwinui-react";
+ import { IconButton } from "@itwin/itwinui-react/cjs";

I then keep getting this almost identical error:

I tried changing with node versions 16 and 18 but faced the same. I also tried changing the import paths to something more specific:

import { IconButton } from "@itwin/itwinui-react/cjs/core/Buttons/IconButton";

But that didn't work too.

When trying npm run preview, it gives me a syntax error in global.css

Not sure if they are related, but I also received a syntax error when trying to use @itwin/itwinui-react in Next JS but without using next-transpile-modules.

Here is a sample repo I created where I tried using iTwinUI-react's IconButton:
https://github.com/rohan-kadkol/demo-qwik-itwinui

Is there something I am missing? Or maybe is there a reason why iTwinUI components won't work in Qwik apps?

[mayank99]

This error likely has nothing to do with qwik itself.

I cannot access your sample repo (might be private) but if I had to guess, you are using qwik city, which is an SSR framework for qwik (similar to nextjs or astro). qwik city uses vite for SSR, and it's tricky to make it work out of the box.

Try adding type: module to your package.json and see if it changes the error you get.

After that, try adding @itwin/itwinui-react and @itwin/itwinui-css to ssr.noExternal in your vite config.

export default defineConfig({
  /* ...rest of your vite config */

  ssr: {
    noExternal: [
      '@itwin/itwinui-react',
      '@itwin/itwinui-css',
    ]
  }
});

[mayank99]

did you try ssr.noExternal?

and the repo is still private

[r100-stack]

and the repo is still private

Ohh, not sure why that is. I tried making it public again. Does it work now?

[mayank99]

yes it does now

[mayank99]

can you narrow down the repro to just qwikcity+react+itwinui by removing mui and emotion?

[r100-stack]

I recloned the repo, tried out ssr.noExternal, and it worked! Thanks!

I guess I might have done something wrong when I tried it before. Maybe some local uncommitted changes I made that caused their own errors that I confused for errors because of ssr.noExternal. Since I recloned the repo, those local changes were not there.

Althought the visual part works, onClick intereactions with it don't seem to work. Maybe I need to make some more Qwik specific changes. When I try it out, will let you know if I could get the interaction to work.