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

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


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.353 added 586 packages in 20s
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.298 :heavy_check_mark: Generated Prisma Client (v5.3.1) to ./node_modules/@prisma/client in 78ms
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 See other ways of importing Prisma Client: Prisma Client
20:23:46.988 Prisma schema loaded from prisma/schema.prisma
20:23:46.996 Datasource “db”: MySQL database “issue-tracker” at “”
20:23:47.535 1 migration found in prisma/migrations
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.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:07.371 Failed to compile.
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 Module Not Found | Next.js
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 Module Not Found | Next.js
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

And this is my github link in case:

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!

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)

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.

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

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

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