Upload nodejs 16.14.2 project in nextjs 12 to nodejs 18.17.0

October 23, 2023

I created my project using nodejs 16 and nextjs 12, but i wanted to update to nodejs 18. So I did the steps above:

1- Removed my node_modules
2- Removed my .next folder
3- nvm use 18 on terminal
4- yarn (to install all dependencies)

When I finished, this process, i got an error for every component used in my pages folder, or even on a component inside a component:

The 'MYCOMPONENT' module cannot be used as a JSX component.
Its type '({ href, type, active, children }: MYCOMPONENTSPROPS) => Element' is not a valid JSX element type.
The type '({ href, type, active, children }: MYCOMPONENTSPROPS) => Element' cannot be assigned to the type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
The type 'Element' cannot be assigned to 'ReactNode'.
The 'children' property is missing in the 'Element' type but is required in the 'ReactPortal' type.ts(2786)
index.d.ts(175, 9): 'children' is declared here.

It didnt show any error on my project, but it kept showing on vs code.

My package.json is:

"dependencies": {
    "next": "12.2.3",
    "nookies": "^2.5.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-responsive": "^9.0.0",
    "redux-persist": "^6.0.0",
    "sass": "^1.54.0"
},
"devDependencies": {
    "@types/node": "18.6.3",
    "@types/react": "18.0.15",
    "@types/react-dom": "18.0.6",
    "eslint": "8.21.0",
    "eslint-config-next": "12.2.3",
    "prettier": "3.0.3",
    "typescript": "^5.2.2"
}