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

Shopify Apps
1

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: [email removed]
Found: [email removed]
node_modules/react
[email removed] from the root project

Could not resolve dependency:
peer [email removed] <18.0.0” from @Shopify_77 [email removed]
node_modules/@shopify/admin-ui-extensions-react
@Shopify_77 [email removed] 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_77 /admin-ui-extensions-react
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email removed]
npm ERR! Found: [email removed]
npm ERR! node_modules/react
npm ERR! [email removed] from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer [email removed] <18.0.0” from @Shopify_77 [email removed]
npm ERR! node_modules/@shopify/admin-ui-extensions-react
npm ERR! @Shopify_77 [email removed] 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.

2

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

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. :blush:

4

Thank you so much. I will try that. Jb