Home Uncategorized Hydration error & Uncaught Syntax Error (format.js) error when beginning up the following.js dev server

Hydration error & Uncaught Syntax Error (format.js) error when beginning up the following.js dev server

Informative
-
0


**My code and my failed makes an attempt to resolve in direction of the underside

Hi there, I’ve a subsequent.js challenge that I simply began. Once I run npm run dev , I get the next error within the Chrome console:

format.js:160 Uncaught

SyntaxError: Invalid or surprising token (at format.js:160:29)

Moreover, my one onClick occasion and all of the Hyperlink elements cease working. After a minute or so, the web page crashes with a `Unhandled Runtime Error`, and the console prints out a pair extra errors. These errors are a few `Uncaught ChunkLoadError` and the next:

Warning: An error occurred throughout hydration. The server HTML was changed with consumer content material in <#doc>.

The error occurs on about 3 out of 5 instances once I begin the dev server too. No errors within the node terminal, solely on the browser.

https://preview.redd.it/v9pqdhkntlqd1.png?width=1789&format=png&auto=webp&s=c8b28a17cb9e4745a386b871b01b2ee4d098f0bc

Does anybody know what may very well be the trigger for these errors? Is it an error that solely occurs throughout growth? Any tips about how I can resolve my downside?

My code to this point that generates the error (with out the commented elements):

format.tsx

import kind { Metadata } from 'subsequent' import { Montserrat } from 'subsequent/font/google' import './globals.css' import Navbar from '@/elements/Navbar/Navbar' import Footer from '@/elements/Footer/Footer' // const montserrat = Montserrat({ subsets: ['latin'] }) export const metadata: Metadata = { title: 'Create Subsequent App', description: 'Generated by create subsequent app', } export default operate RootLayout({ youngsters, }: Readonly<{ youngsters: React.ReactNode }>) { return ( <html lang='en'> <physique> <Navbar /> {youngsters} <Footer /> </physique> </html> ) }

Navbar.tsx

import Hyperlink from 'subsequent/hyperlink' import Menu from '@/elements/Menu/Menu' const Navbar = () => { return ( <div className='h-20 pt-1 px-4 md:px-8 lg:px-16 xl:px-32 2xl:px-64 relative'> <div className='flex justify-between items-center'> <Hyperlink href='/'>TRAVEL PLANNER</Hyperlink> {/* <Menu /> */} </div> </div> ) } export default Navbar

Footer.tsx

const Footer = () => { return ( <div> <a href='https://www.flaticon.com/free-icons/climbing' title='climbing icons'> Mountain climbing icons created by Freepik - Flaticon </a> <a href='https://www.flaticon.com/free-icons/tenting' title='tenting icons' > Tenting icons created by Freepik - Flaticon </a> <a href='https://www.flaticon.com/free-icons/up-and-down' title='up and down icons' > Up and down icons created by Freepik - Flaticon </a> </div> ) } export default Footer

dependencies:

{ "identify": "travel-planner-app", "model": "0.1.0", "non-public": true, "scripts": { "dev": "subsequent dev", "construct": "subsequent construct", "begin": "subsequent begin", "lint": "subsequent lint", "check": "jest", "check:watch": "jest --watch" }, "dependencies": { "subsequent": "^14.2.8", "react": "^18", "react-dom": "^18" }, "devDependencies": { "@testing-library/jest-dom": "^6.4.2", "@testing-library/react": "^14.2.1", "@testing-library/user-event": "^14.5.2", "@sorts/jest": "^29.5.12", "@sorts/node": "^20", "@sorts/react": "^18", "@sorts/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.1.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-jest-dom": "^5.1.0", "eslint-plugin-testing-library": "^6.2.0", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "postcss": "^8", "prettier": "3.3.3", "tailwindcss": "^3.3.0", "ts-jest": "^29.1.2", "ts-node": "^10.9.2", "typescript": "^5" } }

Please let me know if I have to make clear on something or if I’m mistaken about one thing. I’m nonetheless pretty new with Subsequent.js 14 and server elements too.

My makes an attempt to resolve that didn’t work:

  • I seemed over my code to verify there weren't any syntax errors, although I might have missed one thing.
  • I attempted evaluating the html on the server facet in opposition to the html on the consumer facet by wanting on the html within the Community tab and the Components tab of the Chrome Dev instrument. I couldn't see any distinction within the physique of the html.
  • I attempted deleting the `.subsequent` folder and clearing my node modules for a recent restart, which labored for a bit, however the error returned after a few begins. I additionally tried clearing the cache on Chrome.
  • Lastly, I attempted narrowing down the foundation of the error by commenting out parts and elements (since I’ve only a few from simply beginning it). Evidently the error solely reveals up when I’ve any Hyperlink elements or when my onClick occasion is current. Leaving any one among them uncommented yields the error. I checked out the documentation for the Hyperlink element on subsequent.js web site, however I couldn’t discover one thing I used to be doing incorrectly. Anchor tags don't create the error.

I additionally checked the next stackoverflow query and Subsequent.js documentation, however couldn't discover a everlasting resolution or a proof by them (or possibly the answer was within the doc and I didn’t perceive:

submitted by /u/Hour_Construction539 to r/nextjs
[comments]

© Newspaper WordPress Theme by TagDiv