[Bug]: npm run generate extension causes external error

ConnorIngold commented 1 year ago

Please confirm that you have:

[X] Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
[X] Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Extension

Expected behavior

I expected it to generate the extension with all it's files.

Actual behavior

I got an external error:

Error coming from `npm install @shopify/checkout-ui-extensions-react@^0.24.0 --save-prod`

Command failed with exit code 1: npm install @shopify/checkout-ui-extensions-react@^0.24.0 --save-prod
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: checkout-app-test@1.0.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@">=17.0.0 <18.0.0" from @shopify/checkout-ui-extensions-react@0.24.0
npm ERR! node_modules/@shopify/checkout-ui-extensions-react
npm ERR!   @shopify/checkout-ui-extensions-react@"^0.24.0" 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.

Verbose output

0 verbose cli C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js
1 info using npm@8.19.2
2 info using node@v18.12.1
3 timing npm:load:whichnode Completed in 0ms
4 timing config:load:defaults Completed in 1ms
5 timing config:load:file:C:\Program Files\nodejs\node_modules\npm\npmrc Completed in 2ms
6 timing config:load:builtin Completed in 4ms
7 timing config:load:cli Completed in 2ms
8 timing config:load:env Completed in 0ms
9 timing config:load:file:S:\projects\testest\checkout-app-test\.npmrc Completed in 1ms
10 timing config:load:project Completed in 5ms
11 timing config:load:file:C:\Users\connor\.npmrc Completed in 0ms
12 timing config:load:user Completed in 1ms
13 timing config:load:file:C:\Users\connor\AppData\Roaming\npm\etc\npmrc Completed in 0ms
14 timing config:load:global Completed in 0ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:credentials Completed in 1ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 17ms
19 timing npm:load:configload Completed in 18ms
20 timing npm:load:mkdirpcache Completed in 0ms
21 timing npm:load:mkdirplogs Completed in 0ms
22 verbose title npm install @shopify/checkout-ui-extensions-react@^0.24.0
23 verbose argv "install" "@shopify/checkout-ui-extensions-react@^0.24.0" "--save-prod"
24 timing npm:load:setTitle Completed in 1ms
25 timing config:load:flatten Completed in 3ms
26 timing npm:load:display Completed in 4ms
27 verbose logfile logs-max:10 dir:C:\Users\connor\AppData\Local\npm-cache\_logs
28 verbose logfile C:\Users\connor\AppData\Local\npm-cache\_logs\2023-04-07T19_55_56_398Z-debug-0.log
29 timing npm:load:logFile Completed in 5ms
30 timing npm:load:timers Completed in 0ms
31 timing npm:load:configScope Completed in 0ms
32 timing npm:load Completed in 29ms
33 timing arborist:ctor Completed in 0ms
34 silly logfile start cleaning logs, removing 5 files
35 timing idealTree:init Completed in 313ms
36 timing idealTree:userRequests Completed in 3ms
37 silly idealTree buildDeps
38 silly fetch manifest react@^18.0.2
39 silly logfile error removing log file C:/Users/connor/AppData/Local/npm-cache/_logs/2023-04-07T19_46_53_015Z-debug-0.log [Error: EPERM: operation not permitted, lstat 'C:\Users\connor\AppData\Local\npm-cache\_logs\2023-04-07T19_46_53_015Z-debug-0.log'] {
39 silly logfile   errno: -4048,
39 silly logfile   code: 'EPERM',
39 silly logfile   syscall: 'lstat',
39 silly logfile   path: 'C:\\Users\\connor\\AppData\\Local\\npm-cache\\_logs\\2023-04-07T19_46_53_015Z-debug-0.log'
39 silly logfile }
40 timing arborist:ctor Completed in 1ms
41 silly logfile error removing log file C:/Users/connor/AppData/Local/npm-cache/_logs/2023-04-07T19_47_21_746Z-debug-0.log [Error: EPERM: operation not permitted, unlink 'C:\Users\connor\AppData\Local\npm-cache\_logs\2023-04-07T19_47_21_746Z-debug-0.log'] {
41 silly logfile   errno: -4048,
41 silly logfile   code: 'EPERM',
41 silly logfile   syscall: 'unlink',
41 silly logfile   path: 'C:\\Users\\connor\\AppData\\Local\\npm-cache\\_logs\\2023-04-07T19_47_21_746Z-debug-0.log'
41 silly logfile }
42 silly logfile error removing log file C:/Users/connor/AppData/Local/npm-cache/_logs/2023-04-07T19_47_21_786Z-debug-0.log [Error: EPERM: operation not permitted, unlink 'C:\Users\connor\AppData\Local\npm-cache\_logs\2023-04-07T19_47_21_786Z-debug-0.log'] {
42 silly logfile   errno: -4048,
42 silly logfile   code: 'EPERM',
42 silly logfile   syscall: 'unlink',
42 silly logfile   path: 'C:\\Users\\connor\\AppData\\Local\\npm-cache\\_logs\\2023-04-07T19_47_21_786Z-debug-0.log'
42 silly logfile }
43 silly logfile done cleaning log files
44 http fetch GET 200 https://registry.npmjs.org/react 370ms (cache revalidated)
45 silly fetch manifest @shopify/checkout-ui-extensions-react@^0.24.0
46 http fetch GET 200 https://registry.npmjs.org/@shopify%2fcheckout-ui-extensions-react 1398ms (cache revalidated)
47 silly fetch manifest react@>=17.0.0 <18.0.0
48 timing idealTree Completed in 2117ms
49 timing command:install Completed in 2125ms
50 verbose stack Error: unable to resolve dependency tree
50 verbose stack     at [failPeerConflict] (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1381:25)
50 verbose stack     at [loadPeerSet] (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1347:34)
50 verbose stack     at async [buildDepStep] (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:930:11)
50 verbose stack     at async Arborist.buildIdealTree (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:211:7)
50 verbose stack     at async Promise.all (index 1)
50 verbose stack     at async Arborist.reify (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:153:5)
50 verbose stack     at async Install.exec (C:\Program Files\nodejs\node_modules\npm\lib\commands\install.js:145:5)
50 verbose stack     at async module.exports (C:\Program Files\nodejs\node_modules\npm\lib\cli.js:78:5)
51 verbose cwd S:\projects\testest\checkout-app-test
52 verbose Windows_NT 10.0.22621
53 verbose node v18.12.1
54 verbose npm  v8.19.2
55 error code ERESOLVE
56 error ERESOLVE unable to resolve dependency tree
57 error
58 error While resolving: checkout-app-test@1.0.0
58 error Found: react@18.2.0
58 error node_modules/react
58 error   react@"^18.0.2" from the root project
58 error
58 error Could not resolve dependency:
58 error peer react@">=17.0.0 <18.0.0" from @shopify/checkout-ui-extensions-react@0.24.0
58 error node_modules/@shopify/checkout-ui-extensions-react
58 error   @shopify/checkout-ui-extensions-react@"^0.24.0" from the root project
58 error
58 error Fix the upstream dependency conflict, or retry
58 error this command with --force, or --legacy-peer-deps
58 error to accept an incorrect (and potentially broken) dependency resolution.
58 error
58 error See C:\Users\connor\AppData\Local\npm-cache\eresolve-report.txt for a full report.
59 verbose exit 1
60 timing npm Completed in 2279ms
61 verbose unfinished npm timer reify 1680897356546
62 verbose unfinished npm timer reify:loadTrees 1680897356551
63 verbose unfinished npm timer idealTree:buildDeps 1680897356869
64 verbose unfinished npm timer idealTree:#root 1680897356870
65 verbose code 1
66 error A complete log of this run can be found in:
66 error     C:\Users\connor\AppData\Local\npm-cache\_logs\2023-04-07T19_55_56_398Z-debug-0.log

Reproduction steps

npm init @shopify/app@latest cd your-app npm run shopify app generate extension

Operating System

Windows 11

Shopify CLI version (check your project's `package.json` if you're not sure)

3.45.0

Shell

bash

Node version (run `node -v` if you're not sure)

v18.12.1

What language and version are you using in your application?

Node

alvaro-shopify commented 1 year ago

Hi @ConnorIngold . Thank for rising up this issue!. It seems that there is a bug as the cli-kit module has been upgraded to use Reacy 18. We’ll have to revisit that part of the graph to make React not a peer dependency

There is a workaround fixing the version using resolutions https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/

Delete node_modules , package-lock.json and pnpm-lock.yaml generated in previous dependencies installation (the ones that applies to your package manage setup)
Add this content to the root package.json

{
  "resolutions": {
    "react": "18.2.0"
  }
}

Run yarn install and once it finishes yarn shopify app generate extension again

Please let me know if this works for you. Anyway, we are working on a fix for this problem. Sorry for the inconveniences.

ConnorIngold commented 1 year ago

Hi @alvaro-shopify, No luck I'm afraid, but I am using NPM over Yarn, so that might have something to do with. Is 100% neccary to use yarn here? I would prefer not too but the requests from merchants for this work are coming in and I need to get to grips with it, 😅

Regardless thank you and I've pushed it up to a public repo: https://github.com/ConnorIngold/shopify-checkout-extention-test

alvaro-shopify commented 1 year ago

Hi @ConnorIngold. Sorry, I didn't notice that you were using npm. Could you run the command generate using the --fore parameter like this?

npm run shopify app generate extension --force

it should do the same effect as using resolutions with yarn

justinhenricks commented 1 year ago

Hi @ConnorIngold. Sorry, I didn't notice that you were using npm. Could you run the command generate using the --fore parameter like this?
npm run shopify app generate extension --force
it should do the same effect as using resolutions with yarn

I got this error today too - is running this command with --force safe?

ConnorIngold commented 1 year ago

Hi @ConnorIngold. Sorry, I didn't notice that you were using npm. Could you run the command generate using the --fore parameter like this?
npm run shopify app generate extension --force
it should do the same effect as using resolutions with yarn

@alvaro-shopify This worked for me, thank you!

alvaro-shopify commented 1 year ago

I got this error today too - is running this command with --force safe?

It should be, it's forcing to use the last React version which is mandatory for the last version of the CLI UI Kit.

Arkham commented 1 year ago

Hi everyone, we released 3.45.1 which resolves this issue.

A quick post-mortem: when you generate a UI extension, the CLI runs this command for you: npm install react@17.0.0 @shopify/admin-ui-extensions-react@1.1.0. It turns out that npm is not able to figure out that @shopify/admin-ui-extensions-react peer-depends on the same react package, so the fix that we implemented is to run the commands separately:

npm install react@17.0.0
npm install @shopify/admin-ui-extensions-react@1.1.0

yarn and pnpm instead are able to figure out the relationship between the packages, so no changes were necessary.

NathanJolly commented 1 year ago

This is still occurring for POS UI Extensions on 3.45.1, any advice? the --force workaround works for now.

I tried looking for the related PR but it doesn't seem linked to this issue.

github-actions[bot] commented 1 year ago

This issue seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action. → If there's no activity within a week, then a bot will automatically close this. Thanks for helping to improve Shopify's dev tooling and experience.

P.S. You can learn more about why we stale issues here.

tkejr commented 1 year ago

TypeError: Cannot read properties of undefined (reading 'isBatchingLegacy') at ensureRootIsScheduled (/Users/tanmay/Desktop/Apps/Shopify-App-Edit-Order/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:17731:35) at scheduleUpdateOnFiber (/Users/tanmay/Desktop/Apps/Shopify-App-Edit-Order/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:17636:5) at Object.updateContainer (/Users/tanmay/Desktop/Apps/Shopify-App-Edit-Order/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:21022:5) at Ink.render (file:///Users/tanmay/Desktop/Apps/Shopify-App-Edit-Order/node_modules/ink/build/ink.js:226:20) at render (file:///Users/tanmay/Desktop/Apps/Shopify-App-Edit-Order/node_modules/ink/build/render.js:19:14) at renderString (file:///Users/tanmay/Desktop/Apps/Shopify-App-Edit-Order/node_modules/@shopify/cli-kit/dist/private/node/ui.js:39:22) at renderOnce (file:///Users/tanmay/Desktop/Apps/Shopify-App-Edit-Order/node_modules/@shopify/cli-kit/dist/private/node/ui.js:7:33) at renderFatalError (file:///Users/tanmay/Desktop/Apps/Shopify-App-Edit-Order/node_modules/@shopify/cli-kit/dist/public/node/ui.js:207:12) at handler (file:///Users/tanmay/Desktop/Apps/Shopify-App-Edit-Order/node_modules/@shopify/cli-kit/dist/public/node/error.js:113:5) at file:///Users/tanmay/Desktop/Apps/Shopify-App-Edit-Order/node_modules/@shopify/cli-kit/dist/public/node/error-handler.js:27:20 /Users/tanmay/Desktop/Apps/Shopify-App-Edit-Order/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:17731 if ( ReactCurrentActQueue$1.isBatchingLegacy !== null) { ^

TypeError: Cannot read properties of undefined (reading 'isBatchingLegacy') at ensureRootIsScheduled (/Users/tanmay/Desktop/Apps/Shopify-App-Edit-Order/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:17731:35) at scheduleUpdateOnFiber (/Users/tanmay/Desktop/Apps/Shopify-App-Edit-Order/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:17636:5) at Object.updateContainer (/Users/tanmay/Desktop/Apps/Shopify-App-Edit-Order/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:21022:5) at Ink.unmount (file:///Users/tanmay/Desktop/Apps/Shopify-App-Edit-Order/node_modules/ink/build/ink.js:284:20) at EventEmitter.emit (node:events:524:35) at EventEmitter.emit (node:domain:489:12) at emit (/Users/tanmay/Desktop/Apps/Shopify-App-Edit-Order/node_modules/signal-exit/index.js:105:13) at process.processEmit [as emit] (/Users/tanmay/Desktop/Apps/Shopify-App-Edit-Order/node_modules/signal-exit/index.js:193:7) at process.exit (node:internal/process/per_thread:209:15) at process. (file:///Users/tanmay/Desktop/Apps/Shopify-App-Edit-Order/node_modules/@shopify/cli/dist/index.js:12:13)

Node.js v19.5.0

I get this error when I update my cli :(

Jonas121 commented 1 year ago

Problem still exists: npm install npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @shopify/ui-extensions-react@2023.7.2 npm ERR! Found: react@18.2.0 npm ERR! node_modules/react npm ERR! peer react@"18.2.0" from @shopify/app@3.49.5 npm ERR! node_modules/@shopify/app npm ERR! @shopify/app@"^3.0.0" from the root project npm ERR! react@"18.2.0" from @shopify/cli-kit@3.49.5 npm ERR! node_modules/@shopify/cli-kit npm ERR! @shopify/cli-kit@"3.49.5" from @shopify/app@3.49.5 npm ERR! node_modules/@shopify/app npm ERR! @shopify/app@"^3.0.0" from the root project npm ERR! @shopify/cli-kit@"3.49.5" from @shopify/cli@3.49.5 npm ERR! node_modules/@shopify/cli npm ERR! @shopify/cli@"^3.0.0" from the root project npm ERR! 2 more (@shopify/plugin-cloudflare, @shopify/plugin-did-you-mean) npm ERR! 2 more (ink, react-reconciler) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@">=17.0.0 <18.0.0" from @shopify/ui-extensions-react@2023.7.2 npm ERR! node_modules/@shopify/ui-extensions-react npm ERR! @shopify/ui-extensions-react@"2023.7.2" from the root project npm ERR! npm ERR! Conflicting peer dependency: react@17.0.2 npm ERR! node_modules/react npm ERR! peer react@">=17.0.0 <18.0.0" from @shopify/ui-extensions-react@20 23.7.2 npm ERR! node_modules/@shopify/ui-extensions-react npm ERR! @shopify/ui-extensions-react@"2023.7.2" 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.

Shopify / cli