Closed altierawr closed 1 year ago
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 :)
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 :)
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 :)
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).
Yep, that's true. I'll just change the code to match the default and remove the note :)
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. :)
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.
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
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]
});
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! :)
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 :)
Here's the error 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:
But the 3rd steps shows that any package manager can be used:
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.