Build error while deploying to vercel

[BTC415]

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]

Please help me fix this error. Thanks in advance

[dodger213]

Based on the error logs you provided from your Vercel deployment, 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:

1. Check Your Dependencies Make sure that you have @tailwindcss/typography listed as a dependency in your 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

2. Ensure All Dependencies Are Installed Sometimes, an incomplete installation can lead to missing modules. Ensure that all dependencies are installed correctly. You can do this by running:

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.

3. Check Your tailwind.config.js Verify that your tailwind.config.js is properly set up to include the typography plugin. It should look something like this:

module.exports = {
// ...
plugins: [require('@tailwindcss/typography')],
}

4. 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:

Go to your project settings on the Vercel dashboard. Under the "General" section, you can find an option to "Clear Build Cache." This will clear any cached builds and force a fresh installation of dependencies on the next deployment.

5. 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.

6. Redeploy to Vercel Once you have resolved any issues locally and verified that your project builds successfully, push your changes to GitHub (or whichever version control system you’re using), and try redeploying your Next.js project to Vercel:

Go back to your Vercel project dashboard. Trigger a new deployment by clicking on the “Deploy” button or simply by pushing your latest

[BTC415]

It works fine on locally. And I cleared cache, but it still shows error

[dodger213]

Please remove projects on vercel and deploy again. Or create new branch and deploy on that branch.

[BTC415]

Anyway thanks

[BTC415]

Closed