Using radix-ui with AstroJS with React integration

[raunaqgupta]

It seems React 18 is supported (#1329) but I get the following error on

npm install @radix-ui/react-collapsible

(⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠼ reify: timing arborist:ctor Completed in 1ms
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @example/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^17.0.2 || ^18.0.0" from @astrojs/[email protected]
npm ERR!   node_modules/@astrojs/react
npm ERR!     @astrojs/react@"^0.1.1" from the root project
npm ERR!   peer react@"^18.1.0" from [email protected]
npm ERR!   node_modules/react-dom
npm ERR!     peer react-dom@"^17.0.2 || ^18.0.0" from @astrojs/[email protected]
npm ERR!     node_modules/@astrojs/react
npm ERR!       @astrojs/react@"^0.1.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @radix-ui/react-collapsible@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^16.8 || ^17.0" from @radix-ui/[email protected]
npm ERR!   node_modules/@radix-ui/react-collapsible
npm ERR!     @radix-ui/react-collapsible@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/raunagup/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/raunagup/.npm/_logs/2022-04-30T00_02_26_591Z-debug-0.log

Peer dep info:

npm info @radix-ui/react-accordion peerDependencies
{ react: '^16.8 || ^17.0' }

How should I go about resolving this? Thank you!

[benoitgrelard]

Hi @raunaqgupta,

Although the PR was merged, we haven't done a stable release yet, hence why you are seeing this.
You can install the rc if you want in the meantime @next, or wait for the stable release.

[reesscot]

@benoitgrelard Is there an estimate on when the next stable release will be made? We are depending on Radix components in our library and this error message is confusing to users using React 18.

[benoitgrelard]

No ETA yet, but you can see our milestone is almost complete: https://github.com/radix-ui/primitives/milestone/1

[FedericoBiccheddu]

First of all thank you so much for this library. I already use it with Next.js and it is amazing.

Unfortunately have problems too using some @radix-ui/react-tabs v1.0.0 with astro 1.5.0, @astro/react 1.2.0 and react 18.2.0.

Everything works fine in dev, but when I run astro build I receive the following error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

I don't have any idea on what the error could be. Let me know if I can do anything to understand better the problem.

[benoitgrelard]

It is apparently a known issue in astro around importing:
https://twitter.com/mrzachnugent/status/1579808424300523521

[FedericoBiccheddu]

Thanks to that link I did temporarily solved the problem while using astro build updating the astro's configuration file:

export default defineConfig({
  // ...
  vite: {
    ssr: {
      noExternal: ['@radix-ui/react-tabs']
    }
  },
  // ...
});