'After using 'npm run build' to fix problems shows Server Errors

I wanted to try and finally deploy my web3 Next.js project for others to view the results. I tried to use Vercel to deploy my app although I came up with a lot of errors so I used npm run build and fixed things like using <Image /> instead <img /> add 'alt' attribute, add a 'key' prop even ES Lint rules.

I also updated my packages using ncu (so they are all up to date.

So once everything was done. Now when I run npm run dev the website doesn't even work...

I also tried deleting './Icons/search.svg' (as it's unused in my app but shows the same error

I searched everywhere but can't seem to find or understand the problem.

These are the errors that come up:

Errors:

Server Error

    Error: Image with src "/Icons/search.svg" must use "width" and "height" properties or "layout='fill'" property.
    
    This error happened while generating the page. Any console logs will be displayed in the terminal window.
    Call Stack
    Image
    node_modules\next\dist\client\image.js (304:18)
    renderWithHooks
    file:///E:/Desktop/Programming/Market%20Place/FIXED%20ERRORS%20MARKETPLACE/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5471:16)
    renderIndeterminateComponent
    file:///E:/Desktop/Programming/Market%20Place/FIXED%20ERRORS%20MARKETPLACE/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5544:15)
    renderElement
    file:///E:/Desktop/Programming/Market%20Place/FIXED%20ERRORS%20MARKETPLACE/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5759:7)
    renderNodeDestructive
    file:///E:/Desktop/Programming/Market%20Place/FIXED%20ERRORS%20MARKETPLACE/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5898:11)
    renderNode
    file:///E:/Desktop/Programming/Market%20Place/FIXED%20ERRORS%20MARKETPLACE/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6030:12)
    renderHostElement
    file:///E:/Desktop/Programming/Market%20Place/FIXED%20ERRORS%20MARKETPLACE/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5456:3)
    renderElement
    file:///E:/Desktop/Programming/Market%20Place/FIXED%20ERRORS%20MARKETPLACE/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5765:5)
    renderNodeDestructive
    file:///E:/Desktop/Programming/Market%20Place/FIXED%20ERRORS%20MARKETPLACE/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5898:11)
    renderNode
    file:///E:/Desktop/Programming/Market%20Place/FIXED%20ERRORS%20MARKETPLACE/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6030:12)

Package.json:

    {
  "name": "nft-market",
  "version": "0.0.9",
  "private": false,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.1.18",
    "@nomiclabs/hardhat-ethers": "^2.0.5",
    "@nomiclabs/hardhat-waffle": "^2.0.3",
    "@openzeppelin/contracts": "^4.6.0",
    "axios": "^0.27.2",
    "chai": "^4.3.6",
    "ethereum-waffle": "^3.4.4",
    "ethers": "^5.6.4",
    "hardhat": "^2.9.3",
    "ipfs-http-client": "^56.0.3",
    "next": "^12.1.5",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-slick": "^0.29.0",
    "sass": "^1.51.0",
    "slick-carousel": "^1.8.1",
    "uuid": "^8.3.2",
    "web3modal": "^1.9.7",
    "yargs": "^17.4.1"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.5",
    "eslint": "8.14.0",
    "eslint-config-next": "12.1.5",
    "postcss": "^8.4.13",
    "tailwindcss": "^3.0.24"
  }
}

Someone please help figure this out for me

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'After using 'npm run build' to fix problems shows Server Errors

Sources

Related Questions