当前位置： 文江博客话题详情

执行“纱线构建”时错误在Next-JS应用程序中

发布于 2025-02-13 02:56:18 字数 14158 浏览 0 评论 0原文

我正在尝试构建该应用程序来部署它，并且我遇到了这个错误，因为我面临这个问题已经过去了一天，我真的很困扰，并且没有想法，并且该应用程序在本地工作正常，并且没有任何错误开发模式，当我执行YARN构建

控制台中的错误是：

C:\Users\MA13\Desktop\5 days Plan\Portofolio\portfolio-frontend>yarn build
yarn run v1.22.19
warning ..\..\..\..\package.json: No license field
$ next build
info  - Linting and checking validity of types
info  - Creating an optimized production build
Failed to compile.

./public/assets/contact.jpg
TypeError: fetch failed
    at Object.processResponse (node:internal/deps/undici/undici:5555:34)
    at node:internal/deps/undici/undici:5877:42
    at node:internal/process/task_queues:140:7
    at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)

Import trace for requested module:
./components/Contact.jsx
./pages/index.js

./public/assets/projects/property.jpg
TypeError: fetch failed
    at Object.processResponse (node:internal/deps/undici/undici:5555:34)
    at node:internal/deps/undici/undici:5877:42
    at node:internal/process/task_queues:140:7
    at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Import trace for requested module:
./components/Projects.jsx
./pages/index.js


> Build failed because of webpack errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

错误索引中提到的组件

：

import Head from 'next/head'
import Image from 'next/image'
import Navbar from '../components/Navbar'
import HomeSection from '../components/HomeSection'
import About from '../components/About'
import Skills from '../components/Skills'
import Projects from '../components/Projects'
import Contact from '../components/Contact'


export default function Home() {
  return (
    <div >
      <Head>
        <title>Mahmoud | Full Stack</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/assets/logo.png" />
      </Head>
      <Navbar></Navbar>
      <HomeSection/>
      <About />
      <Skills />
      <Projects />
      <Contact />
        
    </div>
  )
}

项目组件：

import Image  from 'next/image'
import Link  from 'next/Link'
import PropertyImg from '../public/assets/projects/property.jpg'

const Projects = () => {
    return (
        <div id='projects' className='w-full'>
            <div className='max-w-[1240px] mx-auto px-2 py-24 '>
                <h3 className='text-xl tracking-widest uppercase text-[#5651e5]'>Projects</h3>
                <h1>What I have Built</h1>
                <div className='grid md:grid-cols-2 gap-8 my-4'>
                    <div className='relative flex items-center justify-center w-full h-auto shadow-xl shadow-gray-400 rounded-xl p-4 group hover:bg-gradient-to-r from-[#565eef] to-[#709dff]'>
                        <Image className='rounded-xl group-hover:opacity-10' src={PropertyImg} alt='/'/>
                        <div className='hidden  group-hover:block absolute '>
                            <div className="flex justify-center items-center">
                                <div>
                                    <h3 className='text-2xl text-white tracking-wider text-center'>Property finder</h3>
                                    <p className='pb-4 pt-2 text-center text-white'>React Project</p>
                                    <Link className='group' href='/'>
                                        <p className='text-center py-3 rounded-lg text-gray-700 bg-white font-bold text-lg cursor-pointer hover:bg-gray-50'>More Info</p>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className='relative flex items-center justify-center w-full h-auto shadow-xl shadow-gray-400 rounded-xl p-4 group hover:bg-gradient-to-r from-[#565eef] to-[#709dff]'>
                        <Image className='rounded-xl group-hover:opacity-10' src={PropertyImg} alt='/'/>
                        <div className='hidden  group-hover:block absolute '>
                            <div className="flex justify-center items-center">
                                <div>
                                    <h3 className='text-2xl text-white tracking-wider text-center'>Property finder</h3>
                                    <p className='pb-4 pt-2 text-center text-white'>React Project</p>
                                    <Link className='group' href='/'>
                                        <p className='text-center py-3 rounded-lg text-gray-700 bg-white font-bold text-lg cursor-pointer hover:bg-gray-50'>More Info</p>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className='relative flex items-center justify-center w-full h-auto shadow-xl shadow-gray-400 rounded-xl p-4 group hover:bg-gradient-to-r from-[#565eef] to-[#709dff]'>
                        <Image className='rounded-xl group-hover:opacity-10' src={PropertyImg} alt='/'/>
                        <div className='hidden  group-hover:block absolute '>
                            <div className="flex justify-center items-center">
                                <div>
                                    <h3 className='text-2xl text-white tracking-wider text-center'>Property finder</h3>
                                    <p className='pb-4 pt-2 text-center text-white'>React Project</p>
                                    <Link className='group' href='/'>
                                        <p className='text-center py-3 rounded-lg text-gray-700 bg-white font-bold text-lg cursor-pointer hover:bg-gray-50'>More Info</p>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className='relative flex items-center justify-center w-full h-auto shadow-xl shadow-gray-400 rounded-xl p-4 group hover:bg-gradient-to-r from-[#565eef] to-[#709dff]'>
                        <Image className='rounded-xl group-hover:opacity-10' src={PropertyImg} alt='/'/>
                        <div className='hidden  group-hover:block absolute '>
                            <div className="flex justify-center items-center">
                                <div>
                                    <h3 className='text-2xl text-white tracking-wider text-center'>Property finder</h3>
                                    <p className='pb-4 pt-2 text-center text-white'>React Project</p>
                                    <Link className='group' href='/'>
                                        <p className='text-center py-3 rounded-lg text-gray-700 bg-white font-bold text-lg cursor-pointer hover:bg-gray-50'>More Info</p>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Projects

联系人组件：

import Image from 'next/image'
import Link  from 'next/Link';
import ContactImage from '../public/assets/contact.jpg'
import {  AiOutlineMail } from 'react-icons/ai'
import { FaFacebook, FaGithub, FaLinkedinIn } from 'react-icons/fa'
import { BsFillPersonLinesFill } from 'react-icons/bs'
import { HiOutlineChevronDoubleUp } from 'react-icons/hi'

const Contact = () => {
    return (
        <div>
            <div id='contact' className='w-full max-w-[1240px] mx-auto px-2 md:h-screen py-24 my-4'>

                <h3 className='text-xl tracking-widest uppercase text-[#5651e5]'>Contact</h3>
                <h1 className='mt-2 mb-6'>Get In Touch</h1>

                <div className='md:grid md:grid-cols-6 gap-4 h-5/6 w-full flex flex-col my-4 justify-center '>
                    <div className=' col-span-2 py-4 px-4 shadow-xl rounded-xl  shadow-gray-400 flex flex-col justify-between h-full'>
                        <div className='mt-2'>
                            <Image className='hover:scale-105 ease-in duration-300 rounded-xl' src={ContactImage} alt='/' />
                            <h3>Mahmoud Ashraf</h3>
                            <p className='my-3'>Full Stack Web Developer</p>
                            <p>I am available for freelancer or full-time positions. contact me and lets talk.</p>
                        </div>
                        <div>
                            <p className='text-center'>contact me on</p>
                            <div className="flex justify-center items-center py-4 space-x-4">
                                <div className='rounded-full shadow-lg shadow-gray-400 p-3 cursor-pointer hover:scale-110 duration-500'>
                                    <FaLinkedinIn />
                                </div>
                                <div className='rounded-full shadow-lg shadow-gray-400 p-3 cursor-pointer hover:scale-110 duration-500'>
                                    <FaGithub />
                                </div>
                                <div className='rounded-full shadow-lg shadow-gray-400 p-3 cursor-pointer hover:scale-110 duration-500'>
                                    <AiOutlineMail />
                                </div>
                                <div className='rounded-full shadow-lg shadow-gray-400 p-3 cursor-pointer hover:scale-110 duration-500'>
                                    <FaFacebook />
                                </div>
                                <div className='rounded-full shadow-lg shadow-gray-400 p-3 cursor-pointer hover:scale-110 duration-500'>
                                    <BsFillPersonLinesFill />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className='col-span-4 py-4 pt-10 md:px-12  shadow-xl rounded-xl  shadow-gray-400 flex justify-between flex-col'>
                        <div className='flex-col space-y-3'>
                            <div className='md:flex  justify-between md:space-x-3'>
                                <div className='flex flex-col w-full '>
                                    <label className='mb-1' htmlFor="name">Name</label>
                                    <input type="text" className='h-10 rounded-lg border-2 border-gray-200' id='name' />
                                </div>
                                <div className='flex flex-col w-full '>
                                    <label className='mb-1' htmlFor="name">Phone</label>
                                    <input type="text" className='h-10 rounded-lg border-2 border-gray-200' id='phone' />
                                </div>
                            </div>
                            <div className='flex flex-col w-full '>
                                <label className='mb-1' htmlFor="email">Email</label>
                                <input type="email" className='h-10 rounded-lg border-2 border-gray-200' id='email' />
                            </div>
                            <div className='flex flex-col w-full '>
                                <label className='mb-1' htmlFor="subject">Subject</label>
                                <input type="text" className='h-10 rounded-lg border-2 border-gray-200' id='subject' />
                            </div>
                            <div className='flex flex-col w-full '>
                                <label className='mb-1' htmlFor="message">Message</label>
                                <textarea type="text" className='h-36 rounded-lg border-2 border-gray-200' id='message' />
                            </div>

                        </div>
                        <div className='flex flex-col justify-center items-center w-full my-6 px-4'>
                            <button className='h-10 w-full md:w-3/4 hover:brightness-105'>Submit</button>
                        </div>

                    </div>
                </div>
            </div>
                    <div className='flex flex-col  justify-center items-center my-10 cursor-pointer hover:scale-105 ease-in duration-300'>
                        <Link href='/' alt='/'>
                            <HiOutlineChevronDoubleUp className='w-10 h-10  rounded-full shadow-lg my-4  shadow-gray-400 text-[#5651e5] p-2' />
                        </Link>
                    </div>


        </div>


    )
}

export default Contact

然后，这是文件夹结构： 在此处输入图像描述

原文

I am trying to build the app to deploy it, and I am getting this error it's been a day now since I am facing this problem and I am really stuck and out of ideas and the app is working fine locally and there are no errors in developing mode, the errors appear when I execute yarn build

the error in the console is:

C:\Users\MA13\Desktop\5 days Plan\Portofolio\portfolio-frontend>yarn build
yarn run v1.22.19
warning ..\..\..\..\package.json: No license field
$ next build
info  - Linting and checking validity of types
info  - Creating an optimized production build
Failed to compile.

./public/assets/contact.jpg
TypeError: fetch failed
    at Object.processResponse (node:internal/deps/undici/undici:5555:34)
    at node:internal/deps/undici/undici:5877:42
    at node:internal/process/task_queues:140:7
    at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)

Import trace for requested module:
./components/Contact.jsx
./pages/index.js

./public/assets/projects/property.jpg
TypeError: fetch failed
    at Object.processResponse (node:internal/deps/undici/undici:5555:34)
    at node:internal/deps/undici/undici:5877:42
    at node:internal/process/task_queues:140:7
    at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Import trace for requested module:
./components/Projects.jsx
./pages/index.js


> Build failed because of webpack errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

the components mentioned in the error

index:

import Head from 'next/head'
import Image from 'next/image'
import Navbar from '../components/Navbar'
import HomeSection from '../components/HomeSection'
import About from '../components/About'
import Skills from '../components/Skills'
import Projects from '../components/Projects'
import Contact from '../components/Contact'


export default function Home() {
  return (
    <div >
      <Head>
        <title>Mahmoud | Full Stack</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/assets/logo.png" />
      </Head>
      <Navbar></Navbar>
      <HomeSection/>
      <About />
      <Skills />
      <Projects />
      <Contact />
        
    </div>
  )
}

the projects component:

import Image  from 'next/image'
import Link  from 'next/Link'
import PropertyImg from '../public/assets/projects/property.jpg'

const Projects = () => {
    return (
        <div id='projects' className='w-full'>
            <div className='max-w-[1240px] mx-auto px-2 py-24 '>
                <h3 className='text-xl tracking-widest uppercase text-[#5651e5]'>Projects</h3>
                <h1>What I have Built</h1>
                <div className='grid md:grid-cols-2 gap-8 my-4'>
                    <div className='relative flex items-center justify-center w-full h-auto shadow-xl shadow-gray-400 rounded-xl p-4 group hover:bg-gradient-to-r from-[#565eef] to-[#709dff]'>
                        <Image className='rounded-xl group-hover:opacity-10' src={PropertyImg} alt='/'/>
                        <div className='hidden  group-hover:block absolute '>
                            <div className="flex justify-center items-center">
                                <div>
                                    <h3 className='text-2xl text-white tracking-wider text-center'>Property finder</h3>
                                    <p className='pb-4 pt-2 text-center text-white'>React Project</p>
                                    <Link className='group' href='/'>
                                        <p className='text-center py-3 rounded-lg text-gray-700 bg-white font-bold text-lg cursor-pointer hover:bg-gray-50'>More Info</p>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className='relative flex items-center justify-center w-full h-auto shadow-xl shadow-gray-400 rounded-xl p-4 group hover:bg-gradient-to-r from-[#565eef] to-[#709dff]'>
                        <Image className='rounded-xl group-hover:opacity-10' src={PropertyImg} alt='/'/>
                        <div className='hidden  group-hover:block absolute '>
                            <div className="flex justify-center items-center">
                                <div>
                                    <h3 className='text-2xl text-white tracking-wider text-center'>Property finder</h3>
                                    <p className='pb-4 pt-2 text-center text-white'>React Project</p>
                                    <Link className='group' href='/'>
                                        <p className='text-center py-3 rounded-lg text-gray-700 bg-white font-bold text-lg cursor-pointer hover:bg-gray-50'>More Info</p>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className='relative flex items-center justify-center w-full h-auto shadow-xl shadow-gray-400 rounded-xl p-4 group hover:bg-gradient-to-r from-[#565eef] to-[#709dff]'>
                        <Image className='rounded-xl group-hover:opacity-10' src={PropertyImg} alt='/'/>
                        <div className='hidden  group-hover:block absolute '>
                            <div className="flex justify-center items-center">
                                <div>
                                    <h3 className='text-2xl text-white tracking-wider text-center'>Property finder</h3>
                                    <p className='pb-4 pt-2 text-center text-white'>React Project</p>
                                    <Link className='group' href='/'>
                                        <p className='text-center py-3 rounded-lg text-gray-700 bg-white font-bold text-lg cursor-pointer hover:bg-gray-50'>More Info</p>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className='relative flex items-center justify-center w-full h-auto shadow-xl shadow-gray-400 rounded-xl p-4 group hover:bg-gradient-to-r from-[#565eef] to-[#709dff]'>
                        <Image className='rounded-xl group-hover:opacity-10' src={PropertyImg} alt='/'/>
                        <div className='hidden  group-hover:block absolute '>
                            <div className="flex justify-center items-center">
                                <div>
                                    <h3 className='text-2xl text-white tracking-wider text-center'>Property finder</h3>
                                    <p className='pb-4 pt-2 text-center text-white'>React Project</p>
                                    <Link className='group' href='/'>
                                        <p className='text-center py-3 rounded-lg text-gray-700 bg-white font-bold text-lg cursor-pointer hover:bg-gray-50'>More Info</p>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Projects

the contact component:

import Image from 'next/image'
import Link  from 'next/Link';
import ContactImage from '../public/assets/contact.jpg'
import {  AiOutlineMail } from 'react-icons/ai'
import { FaFacebook, FaGithub, FaLinkedinIn } from 'react-icons/fa'
import { BsFillPersonLinesFill } from 'react-icons/bs'
import { HiOutlineChevronDoubleUp } from 'react-icons/hi'

const Contact = () => {
    return (
        <div>
            <div id='contact' className='w-full max-w-[1240px] mx-auto px-2 md:h-screen py-24 my-4'>

                <h3 className='text-xl tracking-widest uppercase text-[#5651e5]'>Contact</h3>
                <h1 className='mt-2 mb-6'>Get In Touch</h1>

                <div className='md:grid md:grid-cols-6 gap-4 h-5/6 w-full flex flex-col my-4 justify-center '>
                    <div className=' col-span-2 py-4 px-4 shadow-xl rounded-xl  shadow-gray-400 flex flex-col justify-between h-full'>
                        <div className='mt-2'>
                            <Image className='hover:scale-105 ease-in duration-300 rounded-xl' src={ContactImage} alt='/' />
                            <h3>Mahmoud Ashraf</h3>
                            <p className='my-3'>Full Stack Web Developer</p>
                            <p>I am available for freelancer or full-time positions. contact me and lets talk.</p>
                        </div>
                        <div>
                            <p className='text-center'>contact me on</p>
                            <div className="flex justify-center items-center py-4 space-x-4">
                                <div className='rounded-full shadow-lg shadow-gray-400 p-3 cursor-pointer hover:scale-110 duration-500'>
                                    <FaLinkedinIn />
                                </div>
                                <div className='rounded-full shadow-lg shadow-gray-400 p-3 cursor-pointer hover:scale-110 duration-500'>
                                    <FaGithub />
                                </div>
                                <div className='rounded-full shadow-lg shadow-gray-400 p-3 cursor-pointer hover:scale-110 duration-500'>
                                    <AiOutlineMail />
                                </div>
                                <div className='rounded-full shadow-lg shadow-gray-400 p-3 cursor-pointer hover:scale-110 duration-500'>
                                    <FaFacebook />
                                </div>
                                <div className='rounded-full shadow-lg shadow-gray-400 p-3 cursor-pointer hover:scale-110 duration-500'>
                                    <BsFillPersonLinesFill />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className='col-span-4 py-4 pt-10 md:px-12  shadow-xl rounded-xl  shadow-gray-400 flex justify-between flex-col'>
                        <div className='flex-col space-y-3'>
                            <div className='md:flex  justify-between md:space-x-3'>
                                <div className='flex flex-col w-full '>
                                    <label className='mb-1' htmlFor="name">Name</label>
                                    <input type="text" className='h-10 rounded-lg border-2 border-gray-200' id='name' />
                                </div>
                                <div className='flex flex-col w-full '>
                                    <label className='mb-1' htmlFor="name">Phone</label>
                                    <input type="text" className='h-10 rounded-lg border-2 border-gray-200' id='phone' />
                                </div>
                            </div>
                            <div className='flex flex-col w-full '>
                                <label className='mb-1' htmlFor="email">Email</label>
                                <input type="email" className='h-10 rounded-lg border-2 border-gray-200' id='email' />
                            </div>
                            <div className='flex flex-col w-full '>
                                <label className='mb-1' htmlFor="subject">Subject</label>
                                <input type="text" className='h-10 rounded-lg border-2 border-gray-200' id='subject' />
                            </div>
                            <div className='flex flex-col w-full '>
                                <label className='mb-1' htmlFor="message">Message</label>
                                <textarea type="text" className='h-36 rounded-lg border-2 border-gray-200' id='message' />
                            </div>

                        </div>
                        <div className='flex flex-col justify-center items-center w-full my-6 px-4'>
                            <button className='h-10 w-full md:w-3/4 hover:brightness-105'>Submit</button>
                        </div>

                    </div>
                </div>
            </div>
                    <div className='flex flex-col  justify-center items-center my-10 cursor-pointer hover:scale-105 ease-in duration-300'>
                        <Link href='/' alt='/'>
                            <HiOutlineChevronDoubleUp className='w-10 h-10  rounded-full shadow-lg my-4  shadow-gray-400 text-[#5651e5] p-2' />
                        </Link>
                    </div>


        </div>


    )
}

export default Contact

then this is the folder structure:
enter image description here

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

秋日私语 2025-02-20 02:56:18

经过长时间的研究，我最终解决了它并理解它，

有两种方法可以通过Next/映像在下一个应用程序中包含图片，

  • 第一个是导入图像，然后将其添加到您的下一个/图像组件的源属性中。
  • 第二种方法，如果在这种情况下从API或任何外部URL获取这些图像，则必须配置Image Loader，并且可以从此处读取此信息在此处输入链接描述。

After long research, i ended up solving and understanding it,

there are two ways to include a pic in your next application through next/image

  • the first one is to import the image and then add it to your source attribute of next/image component.
  • the second way if you are getting those images from an API or from any external URL in this case you have to configure image loader and you can read about this from here enter link description here.
回复 原文
~没有更多了~

关于作者

池木

暂无简介

文章
评论
28 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文