ensdomains / thorin

A web3 native design system.
https://thorin.pages.dev
MIT License
83 stars 21 forks source link

[bug] The package is not compatible with the React 18 #136

Closed yussdev closed 10 months ago

yussdev commented 10 months ago

Package Version

0.6.44

Current Behavior

It gives an error when I want to install the package in a Next.js application that uses the React 18:

npm install @ensdomains/thorin
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: unicorn-frontend@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17" from @ensdomains/thorin@0.6.44
npm ERR! node_modules/@ensdomains/thorin
npm ERR!   @ensdomains/thorin@"*" from the root project
npm ERR!
gskril commented 10 months ago

I'll try to recreate your error in the morning (if your repo is open source, feel free to share a link!) and circle back, but wanted to leave a quick comment for now:

Even though Thorin has a peer dependency of React 17, it does work with React 18 and Next.js - see an example here.

We're working on a major refactor to avoid these quirks, but it's probably a few weeks out.

yussdev commented 10 months ago

Here is the public repo: https://codesandbox.io/p/devbox/unicorn-frontend-cfxs2w If you try installing you will face the error

gskril commented 10 months ago

I was able to install and get everything working with npm install @ensdomains/thorin styled-components react-transition-state@1.1.5 --legacy-peer-deps

Not that with the app directory in Next.js, you can only use Thorin in client components - this is a problem with Thorin's dependency on styled-components and will be solved in the ongoing refactor.

I forked your codesandbox and configured everything as needed - note the new /lib folder and <ClientProviders> component wrapping the app in /app/layout.tsx