I have upgraded my large project form Next 10 to Next 12, and I am getting this error:
app_container | Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
app_container | at renderElement (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6043:9)
app_container | at renderNodeDestructiveImpl (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
app_container | at renderNodeDestructive (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
app_container | at renderForwardRef (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5859:5)
app_container | at renderElement (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6005:11)
app_container | at renderNodeDestructiveImpl (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
app_container | at renderNodeDestructive (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
app_container | at renderNode (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
app_container | at renderHostElement (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
app_container | at renderElement (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
It looks like I have an issue with the react-dom, and I cannot find exactly where this error occurs. Since my code-base is quite large it is very difficult to pinpoint exactly where the problem is originated.
How do I troubleshoot this problem? I have seen threads where this error occurs, and it is about deconstructing object in imports. But iff that is the case in my project I cannot find it, since my project is large. How can I find where this problem is in the code?
I am including my package.json, in case the problem could be there.
{
...
"scripts": {
"dev": "yarn && TSC_NONPOLLING_WATCHER=1 NODE_ENV=development nodemon",
"generate": "graphql-codegen",
"build": "next build && tsc --project tsconfig.server.json",
"start": "NODE_ENV=production node dist/server.js",
"build:preprod": "PORT=3332 next build && tsc --project tsconfig.server.json",
"start:preprod": "PORT=3332 NODE_ENV=production node dist/server.js",
"lint": "eslint --ext .tsx --ext .ts .",
"clean": "npx rimraf node_modules && npx rimraf .next"
},
"dependencies": {
"@apollo/client": "^3.7.15",
"@apollo/react-common": "^3.1.4",
"@apollo/react-components": "^4.0.0",
"@apollo/react-hoc": "^4.0.0",
"@apollo/react-hooks": "^4.0.0",
"@codemirror/basic-setup": "^0.18.2",
"@codemirror/commands": "^0.18.3",
"@codemirror/gutter": "^0.18.4",
"@codemirror/lang-javascript": "^0.18.0",
"@codemirror/lang-markdown": "^0.18.4",
"@codemirror/state": "^0.18.7",
"@codemirror/theme-one-dark": "^0.18.1",
"@codemirror/view": "^0.18.17",
"@graphql-codegen/cli": "^2.2.0",
"@graphql-codegen/introspection": "^2.1.1",
"@graphql-codegen/typescript": "^2.2.2",
"@graphql-codegen/typescript-operations": "^2.1.4",
"@graphql-codegen/typescript-react-apollo": "^3.1.4",
"@graphql-codegen/typescript-react-query": "^3.5.8",
"@svgr/webpack": "^5.5.0",
"@types/react": "^17.0.20",
"add": "^2.0.6",
"apollo-client": "^2.6.10",
"babel-plugin-transform-define": "^2.0.1",
"core-js": "^3.2.1",
"eslint-config-prettier": "^8.3.0",
"express": "^4.17.1",
"graphql": "^15.0.0",
"graphql-tag": "^2.10.1",
"lang-papershive": "^0.1.16",
"moment": "^2.29.4",
"next": "12",
"next-fonts": "^1.5.1",
"next-plugin-custom-babel-config": "^1.0.5",
"next-routes": "^1.4.2",
"node-fetch": "^2.6.1",
"pdfjs": "^2.4.7",
"pdfjs-dist": "2.16.105",
"react": "latest",
"react-apollo": "^3.1.5",
"react-csv": "^2.2.2",
"react-device-detect": "^2.2.2",
"react-dom": "latest",
"react-fast-compare": "^3.2.0",
"react-mathjax": "^1.0.1",
"react-pdf": "^5.7.2",
"react-player": "^2.9.0",
"react-querybuilder": "^5.1.1",
"react-sortable-hoc": "^2.0.0",
"styled-components": "v6.0.0-rc.1",
"vue": "3.0.5"
},
"devDependencies": {
"@types/express": "^4.17.1",
"@types/graphql": "^14.2.3",
"@types/node": "^17.0.21",
"eslint": "7.32.0",
"eslint-config-next": "11 ",
"nodemon": "^2.0.12",
"prettier": "^2.4.0",
"regenerator-runtime": "^0.13.3",
"ts-loader": "^9.2.3",
"ts-node": "^10.9.1",
"typescript": "^4.7.4"
},
"proxy": "localhost:3001"
}
