typescriptnext.jsdigital-oceanvercel

Module not found: Can't resolve '@' in Next js app on digital ocean

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
[]
Solution

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