[Bug] Invalid <Link> with <a> child.

smusmanzia123 commented 1 year ago

Version

2.0.0

Reproduction link

https://github.com/creativetimofficial/ct-nextjs-material-dashboard-pro

Operating System

Mac OS Ventura 13.0.1

Device

Macbook Pro M1Pro

Browser & Version

Google Chrome Version 107.0.5304.121

Steps to reproduce

Clone the project
Install the modules using "npm run install:peer-deps"
debug the project using "npm run dev"
What is expected?

A fully functional project with live reload enabled

What is actually happening?

An error is shown with the title "Error: Invalid with child. Please remove or use . Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor"

Solution

Additional comments

Call Stack LinkComponent node_modules/next/dist/client/link.js (269:22) renderWithHooks file:///Users/muhammadusmanzia/Documents/FutureDev/Markalytics/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5658:16) renderForwardRef file:///Users/muhammadusmanzia/Documents/FutureDev/Markalytics/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5842:18) renderElement file:///Users/muhammadusmanzia/Documents/FutureDev/Markalytics/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6005:11) renderNodeDestructiveImpl file:///Users/muhammadusmanzia/Documents/FutureDev/Markalytics/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11) renderNodeDestructive file:///Users/muhammadusmanzia/Documents/FutureDev/Markalytics/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14) renderNode file:///Users/muhammadusmanzia/Documents/FutureDev/Markalytics/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12) renderChildrenArray file:///Users/muhammadusmanzia/Documents/FutureDev/Markalytics/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7) renderNodeDestructiveImpl file:///Users/muhammadusmanzia/Documents/FutureDev/Markalytics/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6141:7) renderNodeDestructive file:///Users/muhammadusmanzia/Documents/FutureDev/Markalytics/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14) renderNode file:///Users/muhammadusmanzia/Documents/FutureDev/Markalytics/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12) renderHostElement file:///Users/muhammadusmanzia/Documents/FutureDev/Markalytics/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5642:3) renderElement file:///Users/muhammadusmanzia/Documents/FutureDev/Markalytics/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5952:5) renderNodeDestructiveImpl file:///Users/muhammadusmanzia/Documents/FutureDev/Markalytics/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11) renderNodeDestructive file:///Users/muhammadusmanzia/Documents/FutureDev/Markalytics/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14) renderNode file:///Users/muhammadusmanzia/Documents/FutureDev/Markalytics/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12) renderChildrenArray file:///Users/muhammadusmanzia/Documents/FutureDev/Markalytics/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7) renderNodeDestructiveImpl file:///Users/muhammadusmanzia/Documents/FutureDev/Markalytics/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6141:7) renderNodeDestructive file:///Users/muhammadusmanzia/Documents/FutureDev/Markalytics/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14) renderElement file:///Users/muhammadusmanzia/Documents/FutureDev/Marka

package.json file

{ "name": "nextjs-material-dashboard-2-pro", "version": "1.0.0", "private": true, "author": "Creative Tim", "license": "SEE LICENSE IN https://www.creative-tim.com/license", "description": "NextJS version of Material Dashboard 2 PRO by Creative Tim", "bugs": { "url": "https://github.com/creativetimofficial/ct-nextjs-material-dashboard-pro/issues" }, "repository": { "type": "git", "url": "git+https://github.com/creativetimofficial/ct-nextjs-material-dashboard-pro.git" }, "engines": { "node": "14 || 15 || 16", "npm": ">=6" }, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start", "install:peer-deps": "npm install --legacy-peer-deps" }, "dependencies": { "@asseinfo/react-kanban": "2.2.0", "@babel/preset-react": "7.14.5", "@emotion/cache": "11.7.1", "@emotion/react": "11.8.1", "@emotion/server": "11.4.0", "@emotion/styled": "11.8.1", "@fullcalendar/common": "5.9.0", "@fullcalendar/daygrid": "5.9.0", "@fullcalendar/interaction": "5.9.0", "@fullcalendar/react": "5.9.0", "@fullcalendar/timegrid": "5.9.0", "@mui/icons-material": "5.4.4", "@mui/material": "5.4.4", "chart.js": "3.4.1", "chroma-js": "2.4.2", "dropzone": "5.9.2", "flatpickr": "4.6.9", "formik": "2.2.9", "html-react-parser": "1.4.8", "jsvectormap": "1.4.5", "next": "^13.0.6", "next-transpile-modules": "10.0.0", "prop-types": "15.8.1", "react": "^18.2.0", "react-chartjs-2": "3.0.4", "react-dom": "^18.2.0", "react-flatpickr": "3.10.7", "react-github-btn": "1.2.1", "react-images-viewer": "1.7.1", "react-quill": "1.3.5", "react-table": "7.7.0", "regenerator-runtime": "0.13.9", "stylis": "4.0.13", "stylis-plugin-rtl": "2.1.1", "uuid": "8.3.2", "yup": "0.32.11" }, "devDependencies": { "eslint": "8.10.0", "eslint-config-next": "12.1.0" } }

smusmanzia123 commented 1 year ago

FYI. I already tried the solution "npx @next/codemod new-link ." but it did not work

sajadevo commented 1 year ago

Hey there,

We've updated the product and now it's updated to Next.js 13 and this issue is fixed as well. please update to the latest version (v2.1.0)

Regards, Sajad

creativetimofficial / ct-nextjs-material-dashboard-pro