NextJS & Vercel: Website not rendering/using CSS & ReactJS

Question

Our business is currently exploring Vercel to deploy our new landing pages written in React & NextJS. When running them locally (yarn dev) everything works correctly (both css imports and React hooks). When deployed on Vercel, both CSS & React are not working.

Project is organized as follows (conceptually):

./src/pages/_app.tsx: Imports css (uses tailwind as well) and wraps app into IconContext.Provider (for icons)
./src/pages/index.tsx: Exports (default) component, which uses inside react components to render / hooks to handle logic

We've spent the last few hours debugging this issue, but still no clue on where's the error (since we can perfectly launch them locally).

You can have a look at the website here: https://fudeo-flutter-advanced-git-master.aleamakers.vercel.app/

Can you understand where's the error? Thanks

Have you tried running yarn build && yarn start - yarn dev is only a dev instance. - Additionally, what does the vercel dashboard show? — Ramakay
– Ramakay, Commented Jul 6, 2020 at 16:48

Gabriel Gatu · Accepted Answer · 2020-07-06 19:50:19Z

0

Resolved and found the "error": I'm a complete idiot and React was working in reality. I though the opposite because of the missing css, which made everything messy.

The error I had was in purgecss: It had incorrect rules for purging css, and It was eliminating, at build time, all the custom css.

Thanks @Ramakay for your help. Actually using yarn build && yarn start made everything simpler to replicate locally (didn't notice them in the package.json).

answered Jul 6, 2020 at 19:50

Gabriel Gatu

812 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

NextJS & Vercel: Website not rendering/using CSS & ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related