My Shadcn / Recharts aren't rendering in nextjs 15
Answered
Gharial posted this in #help-forum
GharialOP
anyone using shadcn charts and next15? My charts aren't rendering (even w/ the recommended recharts version) - wondering if you guys encountered this ?
Here are my dependancies, any direction would be amazing!
"dependencies": {
"@hookform/resolvers": "^3.9.0",
"@radix-ui/react-avatar": "^1.1.1",
"@radix-ui/react-collapsible": "^1.1.1",
"@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-dropdown-menu": "^2.1.2",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-popover": "^1.1.2",
"@radix-ui/react-progress": "^1.1.0",
"@radix-ui/react-radio-group": "^1.2.0",
"@radix-ui/react-scroll-area": "^1.2.0",
"@radix-ui/react-select": "^2.1.2",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-tabs": "^1.1.1",
"@radix-ui/react-tooltip": "^1.1.3",
"@types/bcryptjs": "^2.4.6",
"@types/node": "^22.5.5",
"@types/react": "^18.3.11",
"@types/react-dom": "^18.3.1",
"autoprefixer": "^10.4.20",
"bcryptjs": "^2.4.3",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"date-fns": "^4.1.0",
"dotenv": "^16.4.5",
"drizzle-kit": "^0.24.2",
"drizzle-orm": "^0.33.0",
"drizzle-zod": "^0.5.1",
"jose": "^5.9.2",
"lucide-react": "^0.441.0",
"next": "15.0.0-canary.202",
"postcss": "^8.4.47",
"postgres": "^3.4.4",
"prettier": "^3.3.3",
"react": "18.3.1",
"react-day-picker": "8.10.1",
"react-dom": "18.3.1",
"react-hook-form": "^7.53.1",
"recharts": "2.13.0-alpha.4",
"server-only": "^0.0.1",
"stripe": "^16.12.0",
"tailwind-merge": "^2.5.2",
"tailwindcss": "^3.4.12",
"tailwindcss-animate": "^1.0.7",
"tailwindcss-react-aria-components": "1.1.5",
"typescript": "^5.6.2",
"zod": "^3.23.8"
}Here are my dependancies, any direction would be amazing!
Answered by Transvaal lion
I had this problem with recharts and nextjs 15.
I am using pnpm so I resolved it by adding the below to my package.json:
As per discussion here: https://github.com/recharts/recharts/issues/4558#issuecomment-2132375528
Overrides vary from package manager to package manager.
I am using pnpm so I resolved it by adding the below to my package.json:
"pnpm": {
"overrides": {
"@types/react": "npm:types-react@rc",
"@types/react-dom": "npm:types-react-dom@rc",
"react-is": "^19.0.0-beta-26f2496093-20240514"
}
}As per discussion here: https://github.com/recharts/recharts/issues/4558#issuecomment-2132375528
Overrides vary from package manager to package manager.
12 Replies
What do you mean not rendering? It’s just empty? Any error messages in the browser console?
Could you show the code you use to render the chart as well.
Could you show the code you use to render the chart as well.
GharialOP
its literally just not there, no errors, nothin
hmm im not sure here, sorry
GharialOP
It works when I set the height and width of the container, but obviously that’s not responsive
Transvaal lion
I had this problem with recharts and nextjs 15.
I am using pnpm so I resolved it by adding the below to my package.json:
As per discussion here: https://github.com/recharts/recharts/issues/4558#issuecomment-2132375528
Overrides vary from package manager to package manager.
I am using pnpm so I resolved it by adding the below to my package.json:
"pnpm": {
"overrides": {
"@types/react": "npm:types-react@rc",
"@types/react-dom": "npm:types-react-dom@rc",
"react-is": "^19.0.0-beta-26f2496093-20240514"
}
}As per discussion here: https://github.com/recharts/recharts/issues/4558#issuecomment-2132375528
Overrides vary from package manager to package manager.
Answer
GharialOP
did you do anything else ?
Transvaal lion
I added the override, ran pnpm install again and then checked my pnpm-lock.yaml to make sure the override had taken effect and that was it.
GharialOP
cheers man
worked for me : D
Transvaal lion
Excellent!
GharialOP
This helped me out so much thank you!