@ alias for next.js dosen't work when deployed to vercel.

[Tiimmii]

Summary

When i deployed to vercel i found out that the @ alias dosen't work but this works fine locally. At first i thought it was the issue of case sensitivity when you import a component but found out the @ alias wasn't working on vercel for importing components. This led me to import all my components directly without using the @. but now it picks error when importing @tailwind/postcss

Additional information

// Current build errors
    at /vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:185:56
    at Array.map (<anonymous>)
    at getPostCssPlugins (/vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:185:47)
    at async /vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/index.js:125:36
    at async /vercel/path0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js:52:40
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:157:20)
Import trace for requested module:
./app/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css
./app/globals.css
./node_modules/react-mobile-app-button/lib/components/Button/button.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./node_modules/react-mobile-app-button/lib/components/Button/button.css
Error: Cannot find module '@tailwindcss/postcss'

//previous build errors before having to directly import components without using the @ alias
https://nextjs.org/docs/messages/module-not-found
./app/(root)/(Landing)/sections/Hero.tsx
Module not found: Can't resolve '@/components/Landing/ComingSoonButton'
https://nextjs.org/docs/messages/module-not-found
./app/(root)/(Landing)/sections/FAQ.tsx
Module not found: Can't resolve '@/components/Landing/FAQModal'

Example

No response

[sathviksr2001]

Hi @Tiimmii , thanks for sharing this detailed info!

I find this approach interesting, especially how you leverage Next.js middleware for [specific functionality]. I’m curious about the performance implications when deploying on Vercel’s Edge Network — have you noticed any cold start latency or caching challenges?

Also, do you think this pattern scales well for high traffic apps? Would love to hear if you’ve explored fallback strategies or alternative approaches.

[Tiimmii]

Hi. thanks for reply. So actually this is just a normal next.js application nothing really special. on my local server i dont experience any import errors only when i deployed to vercel. And, No i didn't notice any cold start latency or caching challenges

[Tiimmii]

Okay so i actually solved this by having to downgrade tailwind v4 to v3. It seems vercel dosen't support postcss for some reason. Hope this helps someone out there