Skip to content

0.17.0 does not work with React 17 #921

New issue
New issue
Open
#961
Open
0.17.0 does not work with React 17#921
#961
@mariepw

Description

@mariepw
mariepw
opened on Apr 29, 2022

🐛 Bug report

Since useId is not available on React17 it breaks with reach@0.17.0

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

Activity

brandon-pereira

brandon-pereira commented on Apr 29, 2022

@brandon-pereira
brandon-pereira
on Apr 29, 2022

We're experiencing the same issue!

mgo-af

mgo-af commented on May 1, 2022

@mgo-af
mgo-af
on 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

RobertGemmaJr commented on May 5, 2022

@RobertGemmaJr
RobertGemmaJr
on May 5, 2022

On the flip side:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: react-volume-viewer@0.3.1
npm ERR! Found: react@18.1.0
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/listbox@0.17.0
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

rbracco commented on May 11, 2022

@rbracco
rbracco
on May 11, 2022

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

gpbl

gpbl commented on May 15, 2022

@gpbl
gpbl
on 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 that references this issue on May 15, 2022

chore(pkg): downgrade auto-id to 0.16

d2cb129
FrancescoBurchielli

FrancescoBurchielli commented on May 19, 2022

@FrancescoBurchielli
FrancescoBurchielli
on May 19, 2022

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

ghost commented on Jun 20, 2022

@ghost
ghost
on 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
mentioned this on Jul 17, 2022
gpbl
added a commit that references this issue on Aug 11, 2022

chore(pkg): downgrade auto-id to 0.16

7c7af60
emmenko
mentioned this on Aug 28, 2022
emmenko
linked a pull request that will close this issue on Aug 28, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @gpbl@brandon-pereira@mariepw@RobertGemmaJr@rbracco

      Issue actions
        0.17.0 does not work with React 17 · Issue #921 · reach/reach-ui