Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

0.17.0 does not work with React 17 #921

Open
mariepw opened this issue Apr 29, 2022 · 7 comments · May be fixed by #961
Open

0.17.0 does not work with React 17 #921

mariepw opened this issue Apr 29, 2022 · 7 comments · May be fixed by #961

Comments

@mariepw
Copy link

mariepw commented Apr 29, 2022

🐛 Bug report

Since useId is not available on React17 it breaks with [email protected]

In auto-id package https://github.com/reach/reach-ui/blob/develop/packages/auto-id/src/index.tsx,

import * as React from "react";

is compiled as

import { useId as useId$1, useState, useEffect } from 'react'

in the esm module.

This leads to the following error

image

Software Name(s) Version
Reach Package reach/alert-dialog 0.17.0
React React 17.0.2
React-scripts react-scripts 5.0.0
npm/yarn yarn 1.22.18
Operating System MacOs 12.3.1
@brandon-pereira
Copy link

We're experiencing the same issue!

@mgo-af
Copy link

mgo-af commented May 1, 2022



warning ../node_modules/@reach/auto-id/dist/reach-auto-id.esm.js
Attempted import error: 'useId' is not exported from 'react' (imported as 'useId$1').
warning ../node_modules/@reach/auto-id/dist/reach-auto-id.esm.js
Attempted import error: 'useId' is not exported from 'react' (imported as 'useId$1').

with:

"react": "17.0.2",
"react-dom": "17.0.2"

@RobertGemmaJr
Copy link

On the flip side:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   dev react@"^18.1.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || 17.x" from @reach/[email protected]
npm ERR! node_modules/@reach/listbox
npm ERR!   @reach/listbox@"^0.17.0" from the root project

It looks like reach 0.17.0 still expects react 16 or 17 even though it relies on react 18 to work. I think the package.json files for each individual component need to be updated. I'm running into issues with

  • @reach/listbox
  • @reach/tabs

I gather there's more components with the same issue though

@rbracco
Copy link

rbracco commented May 11, 2022

Any update on this? Has anyone found a fix? I'm completely unable to use Reach UI in React 17

@gpbl
Copy link

gpbl commented May 15, 2022

Any update on this? Has anyone found a fix? I'm completely unable to use Reach UI in React 17

Downgrade the package to 0.16 will restore the previous behavior.

gpbl added a commit to gpbl/react-day-picker that referenced this issue May 15, 2022
v0.17 doesn’t work well with React < 18: reach/reach-ui#921
@FrancescoBurchielli
Copy link

same issue here, it's quite a paradox - the library as a whole can't be used with react 18 yet, but certain sub-components work only with it and don't work anymore with react 17 - or am I missing something?

@ghost
Copy link

ghost commented Jun 20, 2022

make a fix or something that allow a user to use their own useId , or a guide how actually use your library. Reach! youre popular.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants