Could not resolve dependency: peer react@"^16.8.0 || 17.x" from @reach/[email protected]

[Drew-Daniels]

Bug report

Describe the bug

I am following the Quickstart: React tutorial for Supabase and at the step where we are asked to install @reach/visually-hidden, I get the following error in my terminal console:

Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || 17.x" from @reach/[email protected]

To Reproduce

1. Go to Quickstart: React tutorial
2. Run the following commands:

• npx create-react-app supabase-react
• cd supabase-react
• npm install @supabase/supabase-js
• npm install @reach/visually-hidden

3. See the following error:

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!   react@"^18.2.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/visually-hidden
npm ERR!   @reach/visually-hidden@"*" 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/<your-user>/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/<your-user>/.npm/_logs/2022-07-17T15_34_16_590Z-debug-0.log

Expected behavior

I would expect there to not be a dependency conflict error while following the tutorial.

Screenshots

System information

• OS: macOS
• Browser: NA
• Version of supabase-js: 1.35.4
• Version of Node.js: 16.15.1

[Hallidayo]

Hi @Drew-Daniels,

This issue is caused due to react 18 being used in the example. It appears that the @reach/visually-hidden library does not support react 18 yet but the maintainers are looking into this:

Pull Request
Github Issue

As a workaround for now you can replace the <VisuallyHidden></VisuallyHidden> component with a div which does not display:

<div style={{display: "none"}}>
   <input
   type="file"
   id="single"
   accept="image/*"
   onChange={uploadAvatar}
   disabled={uploading}
   />
</div>

Just thinking it may be worth adding a note onto the docs to help others which I can do?

[Drew-Daniels]

Hi @Drew-Daniels,

This issue is caused due to react 18 being used in the example. It appears that the @reach/visually-hidden library does not support react 18 yet but the maintainers are looking into this:

Pull Request Github Issue

As a workaround for now you can replace the <VisuallyHidden></VisuallyHidden> component with a div which does not display:

<div style={{display: "none"}}>
   <input
   type="file"
   id="single"
   accept="image/*"
   onChange={uploadAvatar}
   disabled={uploading}
   />
</div>

Just thinking it may be worth adding a note onto the docs to help others which I can do?

Thanks for the context @Hallidayo ! That sounds good to me. I'd be happy to make a PR for this too if you'd rather.

[bricejoosten]

Hi @Drew-Daniels,

This issue is caused due to react 18 being used in the example. It appears that the @reach/visually-hidden library does not support react 18 yet but the maintainers are looking into this:

Pull Request Github Issue

As a workaround for now you can replace the <VisuallyHidden></VisuallyHidden> component with a div which does not display:

<div style={{display: "none"}}>
   <input
   type="file"
   id="single"
   accept="image/*"
   onChange={uploadAvatar}
   disabled={uploading}
   />
</div>

Just thinking it may be worth adding a note onto the docs to help others which I can do?

I went through the exact same issue and replacing with a div worked fine, thanks a lot.

[Hallidayo]

Hi @saltcod - I think this can be closed as its linked with #7828

[saltcod]

Yep for sure! Thanks @Hallidayo