Wall of errors after upgrading to vite and navigating to index #9069
Comments
|
It's hard to say without seeing more code. It should just work. Anyway, have you tried creating a new Vite project to verify your setup works? Also try deleting node_modules and reinstalling to see if that clears it up. Also test if your app works as a production build vs vite dev server. Run |
brophdawg11
added
the
needs-response
|
I have not tested it with a new Vite template. Also I don't know to what extend I'd need to go to be sure it's an error with the current setup. Also it doesn't happen in a reproducable way - Or not that I'd notice a pattern. The code is available here and is based on the Indie Stack: https://github.com/Apsysikal/mokupona/tree/dev |
github-actions
bot
removed
the
needs-response
|
Hmm.. I'm not seeing any errors, except for hydration failure. I would recommend using React Canary to resolve those errors. {
"dependencies": {
"react": "18.3.0-canary-a870b2d54-20240314",
"react-dom": "18.3.0-canary-a870b2d54-20240314"
},
"overrides": {
"react": "18.3.0-canary-a870b2d54-20240314",
"react-dom": "18.3.0-canary-a870b2d54-20240314"
}
}
Hydration error only on className (which could be resolved using 
|
|
Hmm, I can try it with canary. Thank you :) Are you on the main branch? I think that one is not on vite just yet. |
|
This is happening for me too. It happens when I edit a file and navigate to an index page. When I delete all the meta functions it won't happen. |
|
Same here, but it seems to happen with any page that has a meta export, not just the index. Strangely if I have |
|
I was not able to replicate this before adding Tailwind, but afterwards it happens. This error happens with meta functions present in the route files. To replicate: Example repo - link
|
|
@anielfeyt I tried your repo, and I don't see the error. Here's a StackBlitz of your example. The only change I made was to install React canary to remove the hydration errors. I don't see any errors in the console or the page. ⚡️ StackBlitz https://stackblitz.com/edit/github-rxs3r5 |
|
@kiliman I was able to replicate the error with @anielfeyt's repo on my local machine. Apple M1 Pro |
|
@kiliman it seems like it's not possible to recreate this issue in StackBlitz, it needs to be on local. I can however say that solving the hydration issue you mentioned by using the react canary releases also solves this problem when I run the code locally. I compared: vs |
|
I can't wait until they release React 19. Then, we can stop recommending the canary version. |
Could you try and see if the issue still persists after using I can reproduce it in the code repo mentioned above, but after using the canary version, it no longer occurs. If using canary doesn't encounter any issues, then there are no problems. |
When I use above refs about react, will raise the error like this: |
|
I'd love to help more, but I can't reproduce the error. Can you provide a repro? You said in your tweet that you're using the @shopify/app template. Do you get the same error if you create a default app? |
|
Confirming upgrading to canary fixes the issue for me as well.
|
|
|
@kiliman Thanks for your time. I've just created a repo https://github.com/whiskerside/remix-vite-canary-demo to show this error, please take a look when you free. |
|
Looks like it's an issue with 
|
|
To be clear, I got the same issue as you when using 
|
|
wow, you are right, switch to |
|
For everyone who's reading this thread to fix that HMR meta vite issue, i assume they might have the same question I do. |
Reproduction
After upgrading to vite i randomly get this wall of errors in the browser when navigating to the index page:
It does not happen every time and only shows in the browser. The node terminal stays quiet. My vite config looks like this:
Also sometimes the styles don't load correctly. I'm using the vite css url import
import stylesheet from "~/tailwind.css?url";System Info
System: OS: Linux 6.6 Debian GNU/Linux 11 (bullseye) 11 (bullseye) CPU: (8) arm64 unknown Memory: 1.49 GB / 3.83 GB Container: Yes Shell: 5.1.4 - /bin/bash Binaries: Node: 20.11.1 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 10.2.4 - /usr/local/bin/npm pnpm: 8.15.4 - /usr/local/share/npm-global/bin/pnpm npmPackages: @remix-run/dev: ^2.8.1 => 2.8.1 @remix-run/node: ^2.8.1 => 2.8.1 @remix-run/react: ^2.8.1 => 2.8.1 @remix-run/serve: ^2.8.1 => 2.8.1 vite: ^5.1.6 => 5.1.6Used Package Manager
npm
Expected Behavior
I'd expect this not to happen.
Actual Behavior
See issue.
The text was updated successfully, but these errors were encountered: