@shopify/admin-ui-extensions-react npm unable to resolve dependencies react 18.2.0

@shopify/admin-ui-extensions-react npm unable to resolve dependencies react 18.2.0

den232
Shopify Partner
223 8 57

Hello,

 

I am attempting to deploy session token code in an app, and running into this issue of react 18.2.0 vs react 17.0.0

 

Please advise what I may be doing wrong!  Should I use --force? or what?

 

Thanks jb

 

My instructions come from https://shopify.dev/docs/apps/auth/oauth/session-tokens/getting-started

 

# npm resolution error report

While resolving: sdapp17@1.0.0
Found: react@18.2.0
node_modules/react
react@"^18.2.0" from the root project

Could not resolve dependency:
peer react@">=17.0.0 <18.0.0" from @Shopify/admin-ui-extensions-react@1.1.0
node_modules/@shopify/admin-ui-extensions-react
@Shopify/admin-ui-extensions-react@"*" from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

 

------------------------------------------------------

 

npm i @Shopify/admin-ui-extensions-react
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: sdapp17@1.0.0
npm ERR! Found: react@18.2.0
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@">=17.0.0 <18.0.0" from @Shopify/admin-ui-extensions-react@1.1.0
npm ERR! node_modules/@shopify/admin-ui-extensions-react
npm ERR! @Shopify/admin-ui-extensions-react@"*" 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.

Replies 3 (3)

den232
Shopify Partner
223 8 57

Anyone with a suggestion?  Still a breaking problem.  Thanks jb

Kharazian
Shopify Partner
6 0 3

Here’s what you need to do:

  1. Issue: The problem arises because you’re using react@18.2.0, while the Shopify package relies on an older version.
  2. Solution: To resolve this, you can utilize the legacy-peer-deps option.
  3. Steps:
    • Create a file named .npmrc in the root directory of your project (where the package.json file is located).
    • Inside the .npmrc file, add the following line:
      legacy-peer-deps=true
    This setting will help address the compatibility issue between the different package versions. 😊
den232
Shopify Partner
223 8 57

Thank you so much. I will try that. Jb