'JSX code formart break on save using NextJS

I'm Facing a problem someone already posted here but there was no absolute answer.

here is the question I'm facing exact problem. here is the broken code on github

This is cousing problems on netflify deploy which produces this errors

$ next build
10:24:28 PM: info  - Checking validity of types...
10:24:32 PM: Failed to compile.
10:24:32 PM: 
10:24:32 PM: ./components/Header.js:22:9
10:24:32 PM: Type error: JSX element 'div' has no corresponding closing tag.
10:24:32 PM:   20 |     //   const { getQuote } = useContext(CoinMarketContext)
10:24:32 PM:   21 |     return ( <
10:24:32 PM: > 22 |         div className = { styles.header } >
10:24:32 PM:      |         ^
10:24:32 PM:   23 |         <
10:24:32 PM:   24 |         Image alt = ''
10:24:32 PM:   25 |         src = 
'https://s2.coinmarketcap.com/static/cloud/img/coinmarketcap_white_1.svg'
10:24:33 PM: ​
10:24:33 PM: ────────────────────────────────────────────────────────────────
10:24:33 PM:   "build.command" failed                                        
10:24:33 PM: ────────────────────────────────────────────────────────────────
10:24:33 PM: ​
10:24:33 PM:   Error message
10:24:33 PM:   Command failed with exit code 1: next build (https://ntl.fyi/exit-code-1)
10:24:33 PM: ​
10:24:33 PM:   Error location
10:24:33 PM:   In Build command from Netlify app:
10:24:33 PM:   next build
10:24:33 PM: ​
10:24:33 PM:   Resolved config
10:24:33 PM:   build:
10:24:33 PM:     base: /opt/build/repo/coinmarketcap-blockchain
10:24:33 PM:     command: next build
10:24:33 PM:     commandOrigin: ui
10:24:33 PM:     environment:
10:24:33 PM:       - NEXT_PRIVATE_TARGET
10:24:33 PM:     publish: /opt/build/repo/coinmarketcap-blockchain/.next
10:24:33 PM:     publishOrigin: ui
10:24:33 PM:   functionsDirectory: /opt/build/repo/coinmarketcap- 
blockchain/netlify/functions
10:24:33 PM:   plugins:
10:24:33 PM:     - inputs: {}
10:24:33 PM:       origin: ui
10:24:33 PM:       package: '@netlify/plugin-nextjs

'

I tried formarting it using Built in VSCode, Prettier & others(ALT+SHIFT+F => Windows). I also tried setting the TypeScript Version on Use WorkSpace Vesrion (CTRL+shift+p) and many other things but all in vain.

btw I'm Using WSL with nodeJS =>npm/yarn with the latest stable version

Node: v16.15.0 Npm 8.5.5 Yarn: 1.22.15

I don't understand the cause and the error seems weird.Both yarn dev and npm run dev work fine but all builds produce the above error including auto deploy on Netlify after Git Push

npm run build
yarn build
ntl build

All these produce error saying matching close tag(for div & nav are missing which I think is beacuse broken format, If I correct the format its all fine but on hitting save(CTRL+S) its broken again.



Sources

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

Source: Stack Overflow

Solution Source