"gluestack-ui init" fails when using Yarn modern

[fortion71]

Description

Can't initialize gluestack using gluestack-ui init in my project that uses yarn modern (yarn v4)

CodeSandbox/Snack link

https://github.com/resticker/gluetest-yarnmodern

Steps to reproduce

1. git clone https://github.com/resticker/gluetest-yarnmodern
2. Run yarn to install dependencies
3. Run npx gluestack-ui init
4. See errors in console

Initializing gluestack-ui v2...

│
◇  Repository already cloned.
│
◇  Git pull successful.
│
○  ⏳ Installing dependencies. This might take a couple of minutes
Usage Error: The react-native-reanimated@ string didn't match the required format (package-name@range). Did you perhaps forget to explicitly reference the package name?

$ yarn add [--json] [-F,--fixed] [-E,--exact] [-T,--tilde] [-C,--caret] [-D,--dev] [-P,--peer] [-O,--optional] [--prefer-dev] [-i,--interactive] [--cached] [--mode #0] ...
Usage Error: The prettier@ string didn't match the required format (package-name@range). Did you perhaps forget to explicitly reference the package name?

│
◇  Dependencies have been installed successfully.
│
○  ⏳ Generating project configuration. This might take a couple of minutes
env: node\r: No such file or directory
│
■  Error: Error: Command failed: npx jscodeshift -t /Users/name/.npm/_npx/17e7bc1abc5c95a0/node_modules/gluestack-ui/template/codemods/expo/metro-config-transform.ts <... truncated>

gluestack-ui Version

Latest

Platform

• [X] Expo
• [ ] React Native CLI
• [ ] Next
• [ ] Web
• [ ] Android
• [ ] iOS

Other Platform

No response

Additional Information

Using yarn 4.3.1 (see package.json in repo)

npx gluestack-ui init works fine with yarn classic (v1), but I use yarn modern to help with my monorepo.

yarn dlx gluestack-ui init doesn't work, either

[fortion71]

As a workaround, I tried:

1. Reverted my project back to yarn classic
2. Ran npx gluestack-ui init (which succeeded)
3. Upgraded back to Yarn modern

Unfortunately running yarn to install dependencies fails with:

➤ YN0000: · Yarn 4.3.1
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed in 0s 630ms
➤ YN0000: ┌ Post-resolution validation
➤ YN0086: │ Some peer dependencies are incorrectly met by dependencies; run yarn explain peer-requirements for details.
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 1s 977ms
➤ YN0000: ┌ Link step
➤ YN0007: │ frontend@workspace:. must be built because it never has been before or the last one failed
➤ YN0009: │ frontend@workspace:. couldn't be built successfully (exit code 127, logs can be found here: /private/var/folders/fc/jbw4cx0d65ng6h7p3y3668m80000gn/T/xfs-67243fea/build.log)
➤ YN0000: └ Completed in 1s 352ms
➤ YN0000: · Failed with errors in 4s 148ms

The log file showed:

# This file contains the result of Yarn building a package (frontend@workspace:.)
# Script name: postinstall

command not found: patch-package

I can get the error to go away by adding "patch-package": "8.0.0" to devDependencies in my package.json, but that's a bit too janky for my taste. (Note: Got the patch-package version from here, which is referenced here)

Hopefully, the gluestack-ui init script can be updated to support Yarn modern (or someone comes up with a more robust workaround than I did)

[vaibhk20]

Hey @fortion71 thank you for reporting the issue, we are looking into it.

[ed-sparkes]

ooh yeah i hit this today too :(

[vaibhk20]

Hi @fortion71 @ed-sparkes

We've tried reproducing the issue using both your shared repository and our setup, but we couldn't reproduce it. Would you mind trying the CLI again? If you encounter any problems, please don't hesitate to report them. We appreciate your help in resolving this.

[Levine-Sam]

Hi, @vaibhk20 I am experiencing the same issue. I start by creating an expo project: yarn create expo-app. Then I run npx gluestack-ui init. I get this error message.

npx gluestack-ui init

Welcome to gluestack-ui!

│ ◇ Detected a Expo project, continue? │ Yes

┌──────────────────────────────────────────────────────────────────────────────────────────┐ │ │ │ NOTE: Files to get modified │ │ │ │ The command you've run is attempting to modify certain files in your project, │ │ if already exist. Here's what's happening: │ │ │ │ - babel.config.js │ │ - metro.config.js │ │ - tailwind.config.js │ │ - global.css │ │ - tsconfig.json │ │ │ └──────────────────────────────────────────────────────────────────────────────────────────┘

│ ◇ Proceed with caution. Make sure to commit your changes before proceeding. Continue?

│ Yes

Initializing gluestack-ui v2...

│ ◇ Repository already cloned. │ ◇ Git pull successful. │ ○ ⏳ Installing dependencies. This might take a couple of minutes Usage Error: The react-native-reanimated@ string didn't match the required format (package-name@range). Did you perhaps forget to explicitly reference the package name?

$ yarn add [--json] [-F,--fixed] [-E,--exact] [-T,--tilde] [-C,--caret] [-D,--dev] [-P,--peer] [-O,--optional] [--prefer-dev] [-i,--interactive] [--cached] [--mode #0] ... Usage Error: The prettier@ string didn't match the required format (package-name@range). Did you perhaps forget to explicitly reference the package name?

$ yarn add [--json] [-F,--fixed] [-E,--exact] [-T,--tilde] [-C,--caret] [-D,--dev] [-P,--peer] [-O,--optional] [--prefer-dev] [-i,--interactive] [--cached] [--mode #0] ... │ ■ Error: Error installing dependencies.

Please help me.

[GoldMyr1994]

I'm also facing the same problem using "packageManager": "[email protected]".

i tried the reproducible example in here https://github.com/gluestack/gluestack-ui/issues/2362#issue-2445712167

git clone https://github.com/resticker/gluetest-yarnmodern
cd gluetest-yarnmodern
corepack enable
yarn
npx gluestack-ui@latest init

and I got the mentioned error

I made my reproducible example https://github.com/GoldMyr1994/mc-gsv2

git clone [email protected]:GoldMyr1994/mc-gsv2.git
cd gluetest-yarnmodern
corepack enable
yarn
npx gluestack-ui@latest init

and I get the error

Welcome to gluestack-ui!

│
◇ Detected a Expo project, continue?
│ Yes

┌──────────────────────────────────────────────────────────────────────────────────────────┐
│ │
│ NOTE: Files to get modified │
│ │
│ The command you've run is attempting to modify certain files in your project, │
│ if already exist. Here's what's happening: │
│ │
│ - babel.config.js │
│ - metro.config.js │
│ - tailwind.config.js │
│ - global.css │
│ - tsconfig.json │
│ │
└──────────────────────────────────────────────────────────────────────────────────────────┘

│
◇ Proceed with caution. Make sure to commit your changes before proceeding. Continue?

│ Yes

Initializing gluestack-ui v2...

│
◇ Repository already cloned.
│
◇ Git pull successful.
│
○ ⏳ Installing dependencies. This might take a couple of minutes Usage Error: The react-native-reanimated@ string didn't match the required format (package-name@range). Did you perhaps forget to explicitly reference the package name?

$ yarn add [--json] [-F,--fixed] [-E,--exact] [-T,--tilde] [-C,--caret] [-D,--dev] [-P,--peer] [-O,--optional] [--prefer-dev] [-i,--interactive] [--cached] [--mode #0] ... Usage Error: The prettier@ string didn't match the required format (package-name@range). Did you perhaps forget to explicitly reference the package name?

$ yarn add [--json] [-F,--fixed] [-E,--exact] [-T,--tilde] [-C,--caret] [-D,--dev] [-P,--peer] [-O,--optional] [--prefer-dev] [-i,--interactive] [--cached] [--mode #0] ... │
■ Error: Error installing dependencies.

thx @fortion71 for mentioning, It is true that yarn classic works so I temporarly downgraded it and updated again after the step.

[kiflomm]

I am also facing similar issue in my expo project initialized using pnpm

Detected an Expo project, continue?
│  Yes

  ┌──────────────────────────────────────────────────────────────────────────────────────────┐
  │                                                                                          │
  │  NOTE: Files to get modified                                                             │
  │                                                                                          │
  │  The command you've run is attempting to modify certain files in your project,           │
  │  if already exist. Here's what's happening:                                              │
  │                                                                                          │
  │  - babel.config.js                                                                       │
  │  - metro.config.js                                                                       │
  │  - tailwind.config.*                                                                     │
  │  - global.css                                                                            │
  │  - tsconfig.json                                                                         │
  │                                                                                          │
  └──────────────────────────────────────────────────────────────────────────────────────────┘

│
◇  Proceed with caution. Make sure to commit your changes before proceeding. Continue?

│  Yes

Initializing gluestack-ui v2...

│
■   Cloning failed.
│
■  Error occured in init. (Error: fatal: failed to resolve HEAD as a valid ref
│  )