Rendering issue after deployment on vercel
Answered
Blue Lacy posted this in #help-forum
Blue LacyOP
My next js project built using npx create-next-app@latest was rendering fine on localhost but after deployment on vercel the components aren't getting rendered properly.
What I noticed is maybe the modules which I've installed using npm install heroicons/react , etc are creating a problem. (PS: i might be wrong regarding this).
Any workaround will be highly appreciated.
What I noticed is maybe the modules which I've installed using npm install heroicons/react , etc are creating a problem. (PS: i might be wrong regarding this).
Any workaround will be highly appreciated.
Answered by Blue Lacy
thanks @Jboncz @Arinji . the issue was with the configuration of tailwind.config.js file.
added this field in the content array to correctly configure which files/directories contain tailwind class names.
"./src/**/*.{js,ts,jsx,tsx,mdx}",
added this field in the content array to correctly configure which files/directories contain tailwind class names.
"./src/**/*.{js,ts,jsx,tsx,mdx}",
26 Replies
Please share the issue screenshot or error logs here, can't really tell what's the issue without seeeing the error.
Blue LacyOP
On localhost it's working fine
+ there aren't any error logs
Blue LacyOP
@averydelusionalperson any leads?
@Blue Lacy try local build
npm run build, npm run start
Blue LacyOP
it's working fine locally
Go to vercel
Your prpject
Project
Deployments
Click on the production deployment
Click on source
Go through the files which are broken and see what's going on different
@Blue Lacy On localhost it's working fine
Almost looks like its CSS thats breaking.
Question for you. based on your two screenshots.... it actually looks like a different source file. Can you share the code for the top nav?
Blue LacyOP
Def seems like a CSS issue.... Is it seeing your client as a screen reader perhaps?
Thats the only way the elements with 'sr-only' should show?
Blue LacyOP
yes
Where your having an issue can you inspect the page using debug and see if the css is being applied to the elements?
Blue LacyOP
thanks @Jboncz @Arinji . the issue was with the configuration of tailwind.config.js file.
added this field in the content array to correctly configure which files/directories contain tailwind class names.
"./src/**/*.{js,ts,jsx,tsx,mdx}",
added this field in the content array to correctly configure which files/directories contain tailwind class names.
"./src/**/*.{js,ts,jsx,tsx,mdx}",
Answer