返回
多御浏览器
广告
多御浏览器
广告

javascript-在 next-js 应用程序中执行“yarn build”时出错

发布时间：2022-07-07 13:38:03 293
相关标签： # 前端

我正在尝试构建应用程序来部署它，我收到了这个错误，因为我面临这个问题已经有一天了，我真的被卡住了，没有想法，应用程序在本地运行良好，并且没有错误开发模式，执行时出现错误yarn build

控制台中的错误是：

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
 
特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。
举报
评论区(1)
按点赞数排序
用户头像