When I try to deploy Nextjs project to vercel, such errors are occuring. All were good with deployment, but once I clicked "Instant rollback" by chance, all the deployment fails now showing such errors:
[01:18:05.538] Running build in Washington, D.C., USA (East) – iad1 [01:18:05.684] Cloning github.com/BTC415/Nextjs-Supabase-Blog (Branch: main, Commit: 40caf96) [01:18:06.025] Cloning completed: 340.953ms [01:18:06.058] Previous build cache not available [01:18:06.363] Running "vercel build" [01:18:07.076] Vercel CLI 36.0.0 [01:18:07.473] Running "install" command: `npm install --legacy-peer-deps`... [01:18:11.719] npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported [01:18:13.071] npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful. [01:18:13.364] npm warn deprecated glob@7.1.7: Glob versions prior to v9 are no longer supported [01:18:15.525] npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead [01:18:15.555] npm warn deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead [01:18:31.903] [01:18:31.904] added 826 packages, and audited 827 packages in 24s [01:18:31.904] [01:18:31.905] 273 packages are looking for funding [01:18:31.905] run `npm fund` for details [01:18:31.947] [01:18:31.947] 5 vulnerabilities (1 high, 4 critical) [01:18:31.948] [01:18:31.948] To address all issues (including breaking changes), run: [01:18:31.948] npm audit fix --force [01:18:31.948] [01:18:31.948] Run `npm audit` for details. [01:18:31.981] Detected Next.js version: 14.0.2 [01:18:31.988] Detected `package-lock.json` generated by npm 7+ [01:18:31.989] Running "npm run build" [01:18:32.124] [01:18:32.124] > ubdotcafe@0.1.0 build [01:18:32.124] > next build [01:18:32.124] [01:18:32.720] Attention: Next.js now collects completely anonymous telemetry regarding usage. [01:18:32.720] This information is used to shape Next.js' roadmap and prioritize features. [01:18:32.721] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL: [01:18:32.721] https://nextjs.org/telemetry [01:18:32.721] [01:18:32.817] ▲ Next.js 14.0.2 [01:18:32.818] [01:18:32.818] Creating an optimized production build ... [01:19:00.865] Failed to compile. [01:19:00.866] [01:19:00.866] ./icons/loading-dots.module.css [01:19:00.866] Error: Cannot find module '@tailwindcss/typography' [01:19:00.866] Require stack: [01:19:00.866] - /vercel/path0/tailwind.config.js [01:19:00.867] at Module._resolveFilename (node:internal/modules/cjs/loader:1145:15) [01:19:00.867] at /vercel/path0/node_modules/next/dist/server/require-hook.js:54:36 [01:19:00.867] at Function.resolve (node:internal/modules/helpers:190:19) [01:19:00.867] at _resolve (/vercel/path0/node_modules/jiti/dist/jiti.js:1:241814) [01:19:00.867] at jiti (/vercel/path0/node_modules/jiti/dist/jiti.js:1:244531) [01:19:00.867] at /vercel/path0/tailwind.config.js:82:5 [01:19:00.867] at evalModule (/vercel/path0/node_modules/jiti/dist/jiti.js:1:247313) [01:19:00.867] at jiti (/vercel/path0/node_modules/jiti/dist/jiti.js:1:245241) [01:19:00.867] at /vercel/path0/node_modules/tailwindcss/lib/lib/load-config.js:37:30 [01:19:00.867] at loadConfig (/vercel/path0/node_modules/tailwindcss/lib/lib/load-config.js:39:6) [01:19:00.868] [01:19:00.870] Import trace for requested module: [01:19:00.870] ./icons/loading-dots.module.css [01:19:00.870] ./icons/loading-dots.tsx [01:19:00.871] ./icons/index.ts [01:19:00.871] ./components/shared/shared-not-found.tsx [01:19:00.871] ./components/shared/index.ts [01:19:00.871] ./app/not-found.tsx [01:19:00.871] [01:19:00.871] ./icons/loading-dots.module.css [01:19:00.871] Error: Cannot find module '@tailwindcss/typography' [01:19:00.871] Require stack: [01:19:00.871] - /vercel/path0/tailwind.config.js [01:19:00.871] at Module._resolveFilename (node:internal/modules/cjs/loader:1145:15) [01:19:00.871] at /vercel/path0/node_modules/next/dist/server/require-hook.js:54:36 [01:19:00.871] at Function.resolve (node:internal/modules/helpers:190:19) [01:19:00.872] at _resolve (/vercel/path0/node_modules/jiti/dist/jiti.js:1:241814) [01:19:00.872] at jiti (/vercel/path0/node_modules/jiti/dist/jiti.js:1:244531) [01:19:00.872] at /vercel/path0/tailwind.config.js:82:5 [01:19:00.872] at evalModule (/vercel/path0/node_modules/jiti/dist/jiti.js:1:247313) [01:19:00.872] at jiti (/vercel/path0/node_modules/jiti/dist/jiti.js:1:245241) [01:19:00.872] at /vercel/path0/node_modules/tailwindcss/lib/lib/load-config.js:37:30 [01:19:00.872] at loadConfig (/vercel/path0/node_modules/tailwindcss/lib/lib/load-config.js:39:6) [01:19:00.872] [01:19:00.872] Import trace for requested module: [01:19:00.872] ./icons/loading-dots.module.css [01:19:00.872] ./icons/loading-dots.tsx [01:19:00.872] ./icons/index.ts [01:19:00.873] ./components/shared/shared-not-found.tsx [01:19:00.873] ./components/shared/index.ts [01:19:00.873] ./app/(main)/category/[...slug]/error.tsx [01:19:00.873] [01:19:00.873] ./icons/loading-dots.module.css [01:19:00.873] Error: Cannot find module '@tailwindcss/typography' [01:19:00.873] Require stack: [01:19:00.873] - /vercel/path0/tailwind.config.js [01:19:00.873] at Module._resolveFilename (node:internal/modules/cjs/loader:1145:15) [01:19:00.874] at /vercel/path0/node_modules/next/dist/server/require-hook.js:54:36 [01:19:00.874] at Function.resolve (node:internal/modules/helpers:190:19) [01:19:00.874] at _resolve (/vercel/path0/node_modules/jiti/dist/jiti.js:1:241814) [01:19:00.874] at jiti (/vercel/path0/node_modules/jiti/dist/jiti.js:1:244531) [01:19:00.874] at /vercel/path0/tailwind.config.js:82:5 [01:19:00.874] at evalModule (/vercel/path0/node_modules/jiti/dist/jiti.js:1:247313) [01:19:00.874] at jiti (/vercel/path0/node_modules/jiti/dist/jiti.js:1:245241) [01:19:00.874] at /vercel/path0/node_modules/tailwindcss/lib/lib/load-config.js:37:30 [01:19:00.874] at loadConfig (/vercel/path0/node_modules/tailwindcss/lib/lib/load-config.js:39:6) [01:19:00.874] [01:19:00.874] Import trace for requested module: [01:19:00.874] ./icons/loading-dots.module.css [01:19:00.874] ./icons/loading-dots.tsx [01:19:00.874] ./icons/index.ts [01:19:00.875] ./components/shared/shared-not-found.tsx [01:19:00.875] ./components/shared/index.ts [01:19:00.875] ./app/api/og/route.tsx [01:19:00.875] ./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Fog%2Froute&page=%2Fapi%2Fog%2Froute&pagePath=private-next-app-dir%2Fapi%2Fog%2Froute.tsx&appDir=%2Fvercel%2Fpath0%2Fapp&appPaths=%2Fapi%2Fog%2Froute&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/api/og/route.tsx?__next_edge_ssr_entry__ [01:19:00.875] [01:19:00.877] [01:19:00.877] > Build failed because of webpack errors [01:19:00.940] Error: Command "npm run build" exited with 1 [01:19:01.383]
It works well on my local pc, but it doesn't work on vercel. I mean, I have tried to build and start on my local pc, it quite works well without any errors. But always fail on vercel. Please help me fix this bug. Thank you in advance
Based on the error logs you provided from your Vercel deployment, I think it looks like the primary issue is that the module @tailwindcss/typography cannot be found. This can occur if the necessary dependencies are missing or not properly installed in your project.
Here are steps to help you resolve the issue:
package.json. If it's not present, you’ll need to install it.
Run the following command in your local environment:npm install @tailwindcss/typography
npm install
Using npm install --legacy-peer-deps can be used to handle peer dependency issues, but it's typically only needed if you are facing specific dependency conflicts.
module.exports = { // ... plugins: [require('@tailwindcss/typography')], }
Clear Cache and Rebuild Sometimes, Vercel may have cached previous failed builds. Clear the deployment cache by going to your Vercel dashboard for the project.
Perform a Local Build Before deploying again, it's a good idea to ensure that your project builds successfully locally. Run:
npm run build
Check for any errors or warnings that may need to be addressed.