Next.js Discord

Discord Forum

why react-tweet throwing error on nextjs!

Answered
Giant Angora posted this in #help-forum
Open in Discord
Giant AngoraOP
I want to add the tweet to my [nextra blog](https://nextra.site/docs/blog-theme/start) which is a blog template from vercel I'm using [react-tweet](https://react-tweet.vercel.app/) for adding tweet but its throwing error!

whenever I'm using this code then it throws the error
code: import { Tweet } from 'react-tweet' <div className="dark"> <Tweet id="1629307668568633344" /> </div>

error:
Answered by "use php"
Add this to next.config.js
transpilePackages: ['react-tweet']
View full answer

24 Replies

Giant AngoraOP
hey, @B33fb0n3 can you help me with this error?
Answer
And if you want, you can also Ping me in any help-forum thread, whenever you need help!
I won't mind!
Giant AngoraOP
thanks for helping ❤️
@"use php" Add this to next.config.js ts transpilePackages: ['react-tweet']
Giant AngoraOP
Im new in web dev so I dont know much about it.
this is my nextjs config how to add it:
const withNextra = require('nextra')('nextra-theme-blog', './theme.config.js') module.exports = withNextra()
also I want to add latex and react-player/youtube
@"use php" this might help, its nextra docs config:
const withNextra = require("nextra")({ theme: "nextra-theme-docs", themeConfig: "./theme.config.tsx", latex: true });
@"use php" Add this to next.config.js ts transpilePackages: ['react-tweet']
Add this in the config, inside require nextra
Below where you’ve defined themes
@"use php" Add this in the config, inside require nextra
Giant AngoraOP
like this:
const withNextra = require('nextra')('nextra-theme-blog', './theme.config.js'); module.exports = withNextra({ transpilePackages: ['react-tweet'], });
Yes, but let the other be
If that doesn’t work, I’ll get free in about an hour and a half, I’ll assist you then!
Giant AngoraOP
yep it worked I also want to add latex and, react-youtube
Original message was deleted
Giant AngoraOP
sorry!
@Giant Angora yep it worked I also want to add latex and, react-youtube
Alright, so mark that message a a a solution
@"use php" Mark this as a solution
Giant AngoraOP
but its showing half of the profile img
should I use this to correct it; I tried but it is throwing error: https://react-tweet.vercel.app/next#adding-nextimage
@"use php" Add this to next.config.js ts transpilePackages: ['react-tweet']
@Giant Angora in this thread, can you mark this as a solution?
@"use php" Add this to next.config.js ts transpilePackages: ['react-tweet']
right Click > Apps > mark solution
@"use php" right Click > Apps > mark solution
Giant AngoraOP
done
Thanks