I'm working on a Next.js 14 project and encountering a build error. The build process fails with the following error:
This same code works fine on Vercel, but it gives an error on Digital Ocean
[2024-10-23 10:06:22] │ Creating an optimized production build ...
[2024-10-23 10:06:25] │ Failed to compile.
[2024-10-23 10:06:25] │
[2024-10-23 10:06:25] │ ./app/page.tsx
[2024-10-23 10:06:25] │ Module not found: Can't resolve '@/app/component/Hello'
[2024-10-23 10:06:25] │
[2024-10-23 10:06:25] │ https://nextjs.org/docs/messages/module-not-found
[2024-10-23 10:06:25] │
[2024-10-23 10:06:25] │
[2024-10-23 10:06:25] │ > Build failed because of webpack errors
[2024-10-23 10:06:25] │ npm notice
[2024-10-23 10:06:25] │ npm notice New minor version of npm available! 10.7.0 -> 10.9.0
[2024-10-23 10:06:25] │ npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.9.0
[2024-10-23 10:06:25] │ npm notice To update run: npm install -g npm@10.9.0
[2024-10-23 10:06:25] │ npm notice
[2024-10-23 10:06:25] │ building: exit status 1
[2024-10-23 10:06:25] │ ERROR: failed to build: exit status 1
[2024-10-23 10:06:25] │
[2024-10-23 10:06:25] │
[2024-10-23 10:06:25] │ ✘ build failed
here is my code
Component
import React from "react";
const Hello = () => {
return <h1>Hello, World!</h1>;
};
export default Hello;
and using it like in main file
page.tsx
import Image from "next/image";
import styles from "./page.module.css";
import Hello from "@/app/component/Hello";
export default function Home() {
return (
<div className={styles.page}>
<main className={styles.main}>
<Hello />
it should be fine with the digital ocean app build,
Build log from Digital Ocean:
[2024-10-23 10:06:04] │ ⚠ No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
[2024-10-23 10:06:04] │ Attention: Next.js now collects completely anonymous telemetry regarding usage.
[2024-10-23 10:06:04] │ This information is used to shape Next.js' roadmap and prioritize features.
[2024-10-23 10:06:04] │ 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:
[2024-10-23 10:06:04] │ https://nextjs.org/telemetry
[2024-10-23 10:06:04] │
[2024-10-23 10:06:04] │ ▲ Next.js 14.2.16
[2024-10-23 10:06:04] │
[2024-10-23 10:06:04] │ Creating an optimized production build ...
[2024-10-23 10:06:12] │ ✓ Compiled successfully
[2024-10-23 10:06:12] │ Linting and checking validity of types ...
[2024-10-23 10:06:13] │ Collecting page data ...
[2024-10-23 10:06:14] │ Generating static pages (0/5) ...
[2024-10-23 10:06:14] │ Generating static pages (1/5)
[2024-10-23 10:06:14] │ Generating static pages (2/5)
[2024-10-23 10:06:15] │ Generating static pages (3/5)
[2024-10-23 10:06:15] │ ✓ Generating static pages (5/5)
[2024-10-23 10:06:15] │ Finalizing page optimization ...
[2024-10-23 10:06:15] │ Collecting build traces ...
[2024-10-23 10:06:19] │
[2024-10-23 10:06:19] │ Route (app) Size First Load JS
[2024-10-23 10:06:19] │ ┌ ○ / 5.4 kB 92.5 kB
[2024-10-23 10:06:19] │ └ ○ /_not-found 873 B 88 kB
[2024-10-23 10:06:19] │ + First Load JS shared by all 87.1 kB
[2024-10-23 10:06:19] │ ├ chunks/117-81e3ecd288f08c14.js 31.6 kB
[2024-10-23 10:06:19] │ ├ chunks/fd9d1056-aa94ea5c2eabf904.js 53.6 kB
[2024-10-23 10:06:19] │ └ other shared chunks (total) 1.87 kB
[2024-10-23 10:06:19] │
[2024-10-23 10:06:19] │
[2024-10-23 10:06:19] │ ○ (Static) prerendered as static content
[2024-10-23 10:06:19] │
[2024-10-23 10:06:19] │
[2024-10-23 10:06:19] │ -----> Caching build
[2024-10-23 10:06:19] │ - npm cache
[2024-10-23 10:06:19] │
[2024-10-23 10:06:19] │ -----> Pruning devDependencies
[2024-10-23 10:06:20] │
[2024-10-23 10:06:20] │ up to date, audited 23 packages in 922ms
[2024-10-23 10:06:20] │
[2024-10-23 10:06:20] │ 3 packages are looking for funding
[2024-10-23 10:06:20] │ run `npm fund` for details
[2024-10-23 10:06:20] │
[2024-10-23 10:06:20] │ found 0 vulnerabilities
[2024-10-23 10:06:20] │ npm notice
[2024-10-23 10:06:20] │ npm notice New minor version of npm available! 10.7.0 -> 10.9.0
[2024-10-23 10:06:20] │ npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.9.0
[2024-10-23 10:06:20] │ npm notice To update run: npm install -g npm@10.9.0
[2024-10-23 10:06:20] │ npm notice
[2024-10-23 10:06:20] │
[2024-10-23 10:06:20] │ -----> Build succeeded!
[2024-10-23 10:06:21] │ Running custom build command: npm run build
[2024-10-23 10:06:21] │
[2024-10-23 10:06:21] │ > test@0.1.0 build
[2024-10-23 10:06:21] │ > next build
[2024-10-23 10:06:21] │
[2024-10-23 10:06:21] │ ▲ Next.js 14.2.16
[2024-10-23 10:06:21] │
[2024-10-23 10:06:22] │ Creating an optimized production build ...
[2024-10-23 10:06:25] │ Failed to compile.
[2024-10-23 10:06:25] │
[2024-10-23 10:06:25] │ ./app/page.tsx
[2024-10-23 10:06:25] │ Module not found: Can't resolve '@/app/component/Hello'
[2024-10-23 10:06:25] │
[2024-10-23 10:06:25] │ https://nextjs.org/docs/messages/module-not-found
[2024-10-23 10:06:25] │
[2024-10-23 10:06:25] │
[2024-10-23 10:06:25] │ > Build failed because of webpack errors
[2024-10-23 10:06:25] │ npm notice
[2024-10-23 10:06:25] │ npm notice New minor version of npm available! 10.7.0 -> 10.9.0
[2024-10-23 10:06:25] │ npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.9.0
[2024-10-23 10:06:25] │ npm notice To update run: npm install -g npm@10.9.0
[2024-10-23 10:06:25] │ npm notice
[2024-10-23 10:06:25] │ building: exit status 1
[2024-10-23 10:06:25] │ ERROR: failed to build: exit status 1
[2024-10-23 10:06:25] │
[2024-10-23 10:06:25] │
[2024-10-23 10:06:25] │ ✘ build failed
[]
I think something got broken on DO, we have a lot of Frontend websites made with nextjs this way and we didn't encounter any trouble.
This morning i've tried to upload a new one and encounter the same thing.
My workaround by now was to change all the imports by hand instead of using the @/ And had to move devDependencies from the package.json to dependencies, even typescript.
Yeah, I know is not the correct way, but we need that site up now.