App creation fails if yarn isn't installed, even if yarn isn't selected or used for running create-relay-app

[altierawr]

Here's the error log:

Command "npm install --save-exact --save-dev relay-compiler@latest @types/react-relay@latest @types/relay-runtime@latest babel-plugin-relay@latest vite-plugin-relay@https://github.com/tobias-tengler/vite-plugin-relay#tte/fix-plugin" failed

npm ERR! code 127
npm ERR! git dep preparation failed
npm ERR! command /home/dev/.nvm/versions/node/v16.16.0/bin/node /home/dev/.nvm/versions/node/v16.16.0/lib/node_modules/npm/bin/npm-cli.js install --force --cache=/home/dev/.npm --prefer-offline=false --prefer-online=false --offline=false --no-progress --no-save --no-audit --include=dev --include=peer --include=optional --no-package-lock-only --no-dry-run
npm ERR! > vite-plugin-relay@2.0.0 prepare
npm ERR! > husky install && yarn build
npm ERR! npm WARN using --force Recommended protections disabled.
npm ERR! fatal: not a git repository (or any of the parent directories): .git
npm ERR! sh: line 1: yarn: command not found
npm ERR! npm ERR! code 127
npm ERR! npm ERR! path /home/dev/.npm/_cacache/tmp/git-cloneUKSqXM
npm ERR! npm ERR! command failed
npm ERR! npm ERR! command sh -c husky install && yarn build
npm ERR! 
npm ERR! npm ERR! A complete log of this run can be found in:
npm ERR! npm ERR!     /home/dev/.npm/_logs/2022-09-07T18_54_35_818Z-debug-0.log

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/dev/.npm/_logs/2022-09-07T18_54_31_413Z-debug-0.log

Seems like probably the command sh -c husky install && yarn build is making the whole thing fail.

Looking at the README, the first step is only using yarn:

1. Scaffold a new project using the toolchain of your choice (as long as it's supported)
   • Next.js: yarn create next-app --typescript
   • Vite.js: yarn create vite --template react-ts
   • Create React App: yarn create react-app <new-project-directory> --template typescript

But the 3rd steps shows that any package manager can be used:

3. Run the script inside of the scaffolded directory:

npm/yarn/pnpm create @tobiastengler/relay-app@latest

I think there maybe should be a clearer note in the docs that a yarn installation is also required for running the command in the 3rd step.

[tobias-tengler]

Thanks for reporting!

Looking at the log ouput this seems to come from the vite-plugin-relay package.
You can see the prepare script here: https://github.com/oscartbeaumont/vite-plugin-relay/blob/042c343c91527ff9f4946ad5d665387b91cabef2/package.json#L32

You should get the same error just trying to install that package using npm install vite-plugin-relay (haven't confirmed).

If this is true you should raise an issue with the repo of vite-plugin-relay. (You definitely don't want to setup husky for people imstalling your package)
The owner of the package is pretty unresponsive though. I have sent a PR that adds Vite 3 support, but it hasn't been reviewed in almost a month now...

I'm closing this issue since there's nothing I can do about it.

If what I said above is in fact not true, feel free to re-open :)

[tobias-tengler]

Okay this seems to actually be my fault.

If a package being installed through git contains a prepare script, its dependencies and devDependencies will be installed, and the prepare script will be run, before the package is packaged and installed.

Since I'm installing the vite-plugin-relay package from the branch where I added Vite 3 support the package runs the prepare script after the install.

I'll remove the install from branch and instead provide guidance on how to add Vite 3 support manually until my PR is merged. But now it's 💤 time for me, so I'll try to get a fix out tomorrow :)

[tobias-tengler]

I just published v0.0.6, which should address this issue.

You can simply re-run the script

npm create @tobiastengler/relay-app@latest

and the error should no longer happen.

Now you have to add the fixed Vite plugin to your code manually, which is detailed here: https://github.com/tobias-tengler/create-relay-app/blob/main/docs/vite-plugin-setup.md (It will also be shown in the console)

Let me know if you have any other issues :)

[altierawr]

Thanks. It might be worth adding to the docs that you also need to modify tsconfig.node.json to add the lib field to something es6+. Even though you already have this note:

If you are using an ECMAScript standard below ES6 you need to replace the src.includes("graphql") with src.indexOf("graphql") !== -1

Since the default is having lib unset, I think having an explicit note of the change would be good since it's a change from the bootstrapped app that the tool creates (and falls into the vite plugin setup imo).

[tobias-tengler]

Yep, that's true. I'll just change the code to match the default and remove the note :)

[tobias-tengler]

My vite-plugin-relay PR was merged today and I published version 0.0.7 of this package which now will install the vite-plugin-relay package properly. So no more workaround is required. :)

[Presipope]

I'm unsure if I'm wrongfully drudging this up but I've been having trouble getting the script this to work on a new Vite.js project.

I installed Vite.js, and then ran the standard npm script npm create @tobiastengler/relay-app and it fails after "Add RelayEnvironmentProvider". It doesn't seem to be installing the "vite-plugin-relay" in the package.json and from that point on my attempts to fix the problems hasn't worked. Curious if you have a similar issue with a fresh install.

[tobias-tengler]

If you are creating a new Vite.js App using the Vite CLI and run this package afterwards, everything should work. This is also covered by an integration test on our side.
Can you please

• tell me how you setup your Vite.js project
• send me a copy of the log output of the failed create-relay-app command
• attach your current project files as a .zip for me to investigate

[Presipope]

In this scenario I didn't use the Vite CLI to create the app I used npm commands detailed on their "Getting Started", so I assume that's where this went wrong?

I started a new project and went through what I believe were my initial steps from last night. I ended up working through the problem with my original project, so I figured that was a little too far along to use that as a barometer.

I ran the following steps:
npm create vite@latest my-app

From the prompts I selected:
Framework: React
Variant: Typescript

cd my-app
npm install

From there I went to install Tailwind with the following:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then I moved on to create relay
npm create @tobiastengler/relay-app

Then that fails. I've attached the requested log/zip from this example project creation.

2023-04-26T15_27_48_278Z-debug-0.log
my-app.zip

With my original project I did get everything working after the failure. It came down to installing some of the packages through npm manually.
npm install @types/react-relay --save-dev
npm install @types/relay-runtime --save-dev
npm install relay-compiler --save-dev
npm install vite-plugin-relay --save-dev

I also adjusted the order of the plugins in my vite.config.ts file, although I'm not sure if that made a difference but it is something I did so I'd like to note it. It was originally written like:

import relay from "vite-plugin-relay";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default definteConfig({
   plugins: [relay, react()]
});

I changed it to:

import relay from "vite-plugin-relay";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default definteConfig({
   plugins: [react(), relay]
});

[tobias-tengler]

I've just published v2.1.2, where I added the --legacy-peer-deps flag when installing packages via npm. Now the packages should install correctly. Please re-run the script via npm create @tobiastengler/relay-app@latest, this should ensure that everything is setup correctly.
The order of the plugins you changed should stay the way it was configured. The relay transform needs to happen before the react hot re-load plugin.

Let me know if you still encounter any issues! :)

[Presipope]

Everything worked! In my particular scenario on the existing project it added in "babel-plugin-relay": "^15.0.0" as well as adjusting react-relay/relay-runtime to be version "^15.0.0".

Thanks for the fast response @tobias-tengler :)