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.

Sign up for GitHub

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

Jump to bottom

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
@gpbl
chore(pkg): downgrade auto-id to 0.16
d2cb129 
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.

@gpbl gpbl mentioned this issue Jul 17, 2022
Merged
gpbl added a commit to gpbl/react-day-picker that referenced this issue Aug 11, 2022
@gpbl
chore(pkg): downgrade auto-id to 0.16
7c7af60 
v0.17 doesn’t work well with React < 18: reach/reach-ui#921
This was referenced Aug 28, 2022
Merged
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix auto-id build for backwards compatibility with React <18 emmenko/reach-ui
7 participants
@gpbl @brandon-pereira @mariepw @RobertGemmaJr @rbracco @mgo-af @FrancescoBurchielli