I'm currently tackling an issue in my Next.js 14 project where a build error has popped up. The build process is failing with the following error message:
Interestingly, this code runs smoothly on Vercel without any issues, but when deployed on Digital Ocean, it throws an error.
[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 <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ae4fae7cabbbaa4b3a4ba">[email protected]</a>
[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
Below is the snippet of my code causing the issue:
Component
import React from "react";
const Hello = () => {
return <h1>Hello, World!</h1>;
};
export default Hello;
and here's how I am using it in the 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 />
I anticipate that the build should go through without hiccups on Digital Ocean,
Here's the log from the Digital Ocean build:
[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.
...
...
... (omitted for brevity)
[]