我正在开发 Next.js 14 项目并遇到构建错误。构建过程失败并出现以下错误：
相同的代码在 Vercel 上运行良好，但在 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 [email protected]
[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
这是我的代码
组件
import React from "react";
const Hello = () => {
return <h1>Hello, World!</h1>;
};
export default Hello;
并像在主文件中一样使用它
页面.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 />
数字海洋应用程序构建应该没问题，
从 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 [email protected]
[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] │ > [email protected] 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 [email protected]
[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
[]
我认为 DO 上出现了问题，我们有很多前端网站都是用 nextjs 这种方式制作的，但我们没有遇到任何麻烦。
今天早上我尝试上传一个新的，但遇到了同样的事情。
我现在的解决方法是手动更改所有导入，而不是使用 @/ 并且必须将 devDependency 从 package.json 移至依赖项，甚至是 typescript。
是的，我知道这不是正确的方法，但我们现在需要该网站。