Getting errors when deploying to Vercel - Next.js Projects: Build an Issue Tracker

Next.js
1

I am getting 2 errors when deploying to vercel:

  • No Sentry auth token configured
  • Module not found

I fixed the first error by following the suggestion described right below the first error log.
But for the second one, I tried serveral times and I am still getting the same error.
It looks like dynamic import cannot find the module but I couldn’t find why.
It has been fine all the time following the teaching on the video until this part.

const IssueForm = dynamic(() => import(“@/app/issues/_components/IssueForm”), {
ssr: false,
loading: () => ,
});

Can anyone help?
Thanks in advance.

Following is the error log

Screenshot 2023-10-24 at 8.51.04 PM
Screenshot 2023-10-24 at 8.51.04 PM2060×1610 385 KB

Building46s

20:23:21.668 Running build in Washington, D.C., USA (East) – iad1 (Hive)
20:23:21.797 Cloning GitHub - fkim98/issue-tracker (Branch: main, Commit: 146f2ec)
20:23:22.090 Cloning completed: 292.782ms
20:23:22.166 Previous build cache not available
20:23:22.329 Running “vercel build”
20:23:22.769 Vercel CLI 32.4.1
20:23:23.136 Installing dependencies…
20:23:43.352
20:23:43.353 added 586 packages in 20s
20:23:43.353
20:23:43.353 174 packages are looking for funding
20:23:43.353 run npm fund for details
20:23:43.376 Detected Next.js version: 13.5.4
20:23:43.377 Running “prisma generate && prisma migrate deploy && next build”
20:23:45.853 Prisma schema loaded from prisma/schema.prisma
20:23:46.297
20:23:46.298 :heavy_check_mark: Generated Prisma Client (v5.3.1) to ./node_modules/@prisma/client in 78ms
20:23:46.298
20:23:46.298 Start using Prisma Client in Node.js (See: Prisma Client)
20:23:46.298 20:23:46.299 import { PrismaClient } from '@prisma/client' 20:23:46.299 const prisma = new PrismaClient() 20:23:46.299
20:23:46.299 or start using Prisma Client at the edge (See: What is Accelerate)
20:23:46.299 20:23:46.300 import { PrismaClient } from '@prisma/client/edge' 20:23:46.300 const prisma = new PrismaClient() 20:23:46.300
20:23:46.300
20:23:46.300 See other ways of importing Prisma Client: Prisma Client
20:23:46.301
20:23:46.988 Prisma schema loaded from prisma/schema.prisma
20:23:46.996 Datasource “db”: MySQL database “issue-tracker” at “aws.connect.psdb.cloud”
20:23:47.534
20:23:47.535 1 migration found in prisma/migrations
20:23:47.535
20:23:48.313
20:23:48.313 No pending migrations to apply.
20:23:49.065 Attention: Next.js now collects completely anonymous telemetry regarding usage.
20:23:49.065 This information is used to shape Next.js’ roadmap and prioritize features.
20:23:49.066 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:
20:23:49.066 Next.js - Telemetry
20:23:49.066
20:23:49.151 Creating an optimized production build …
20:24:02.982 error - No Sentry auth token configured. Source maps will not be uploaded.
20:24:02.982 To fix this, use Sentry’s Vercel integration to automatically set the SENTRY_AUTH_TOKEN environment variable: Sentry – Vercel
20:24:02.982
20:24:07.371 Failed to compile.
20:24:07.372
20:24:07.373 ./app/issues/edit/[id]/page.tsx:7:32
20:24:07.373 Module not found: Can’t resolve ‘@/app/issues/_components/IssueForm’
20:24:07.374 5 import IssueFormSkeleton from “./loading”;
20:24:07.374 6
20:24:07.375 > 7 const IssueForm = dynamic(() => import(“@/app/issues/_components/IssueForm”), {
20:24:07.375 ^
20:24:07.375 8 ssr: false,
20:24:07.375 9 loading: () => ,
20:24:07.375 10 });
20:24:07.376
20:24:07.376 Module Not Found | Next.js
20:24:07.376
20:24:07.376 ./app/issues/new/page.tsx:4:32
20:24:07.376 Module not found: Can’t resolve ‘@/app/issues/_components/IssueForm’
20:24:07.376 2 import IssueFormSkeleton from “./loading”;
20:24:07.384 3
20:24:07.384 > 4 const IssueForm = dynamic(() => import(“@/app/issues/_components/IssueForm”), {
20:24:07.384 ^
20:24:07.384 5 ssr: false,
20:24:07.384 6 loading: () => ,
20:24:07.384 7 });
20:24:07.384
20:24:07.384 Module Not Found | Next.js
20:24:07.385
20:24:07.385
20:24:07.385 > Build failed because of webpack errors
20:24:07.426 Error: Command “prisma generate && prisma migrate deploy && next build” exited with 1

2

And this is my github link in case:

3

Resolved! Not sure but it works.
I renamed the directory name of ‘_components’ to ‘components’ (without underscore).
But I am not sure this is the right solution. I think there is a good reason we name it with underscore.

For the sentry auth token configuration error, I followed the direction on the error log and it automatically created some environment variables.
I guess Sentry and Vercel did some improvements in the mean time since the video production. It’s amazing, technology improvement to catch up!

4

I don’t know why _components wasn’t working in your dynamic import (worked for me), but the underscore hides the folder from the routing system (see private folders)

5

It was built ok and worked for me on my MacBook. But when I deployed to Vercel, it gave me the error. I guess there are some differences on the Vercel system and the Vercel system cannot find the hidden folder when I deploy. If the Vercel system cannot find it only for me, then I might be doing something wrong.

Thank you for the reply and I appreciate the information you generously provided.

6

Sure thing. Wish I could be of more help regarding the _components error, but I didn’t have that issue when I deployed to Vercel. I compared my code to your snippet and it looked right to me, but maybe the problem is elsewhere. You’re welcome to compare your issue-tracker repo to mine to see if you find the problem.

1 Like
7

Thank you, Tony, for sharing your code. You helped me a lot.
I compared my code with yours and I noticed that I was missing ‘async’ key word:

const IssueForm = dynamic(() => import(“@/app/issues/components/IssueForm”), {
ssr: false,
loading: () => ,
});

Now I put async key word like yours:

const IssueForm = dynamic(
async () => import(“@/app/issues/_components/IssueForm”),
{
ssr: false,
loading: () => ,
}
);

Now everything works fine. Thank you.

Frank Kim.

1 Like
8

Hello Bro
Please help me with a discount code for the next js course if you have