{"id":11896,"library":"react-tweet","title":"React Tweet Embeds","description":"react-tweet is a library maintained by Vercel that enables seamless embedding of individual tweets into React applications, supporting various build tools like Next.js and Vite. It provides components for rendering tweets, including media, and utilities for fetching tweet data. The current stable version is 3.3.0. The package maintains an active release cadence, frequently pushing minor updates and bug fixes, often in response to changes in the underlying X (formerly Twitter) platform's API or styling. Key differentiators include its tight integration with the Vercel ecosystem, built-in styling for a consistent look, and a focus on providing a reliable way to display tweet content that often faces challenges due to Twitter's evolving API access and rate limits.","status":"active","version":"3.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/vercel/react-tweet","tags":["javascript"],"install":[{"cmd":"npm install react-tweet","lang":"bash","label":"npm"},{"cmd":"yarn add react-tweet","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-tweet","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"Components are imported from the `/components` subpath, not the root, since v3.","wrong":"import { Tweet } from 'react-tweet';","symbol":"Tweet","correct":"import { Tweet } from 'react-tweet/components';"},{"note":"API functions like `getTweet` are imported from the `/api` subpath, not the root, since v3.","wrong":"import { getTweet } from 'react-tweet';","symbol":"getTweet","correct":"import { getTweet } from 'react-tweet/api';"},{"note":"Used for displaying a loading state. CommonJS `require` is not supported for these components.","wrong":"const { TweetSkeleton } = require('react-tweet');","symbol":"TweetSkeleton","correct":"import { TweetSkeleton } from 'react-tweet/components';"}],"quickstart":{"code":"import { Tweet } from 'react-tweet/components';\nimport { getTweet } from 'react-tweet/api';\n\n// This component is designed for server-side fetching (e.g., Next.js Server Components)\n// or client-side fetching with appropriate state management.\nasync function MyTweetEmbed({ id }: { id: string }) {\n  const tweet = await getTweet(id);\n\n  if (!tweet) {\n    return <p>Tweet not found or private.</p>;\n  }\n\n  return (\n    <div style={{\n      display: 'flex',\n      justifyContent: 'center',\n      width: '100%',\n      margin: '20px 0'\n    }}>\n      <Tweet rawTweet={tweet} />\n    </div>\n  );\n}\n\n// Example usage in a React component:\n// <MyTweetEmbed id=\"1713028308833912089\" />\n// Remember to call `getTweet` in a server component or `useEffect` for client components.","lang":"typescript","description":"Demonstrates fetching a tweet using `getTweet` and rendering it with the `Tweet` component, suitable for SSR/SSG contexts."},"warnings":[{"fix":"Update import statements: `import { Tweet } from 'react-tweet/components';` and `import { getTweet } from 'react-tweet/api';`.","message":"Version 3.0.0 introduced significant breaking changes, specifically around import paths. Components like `Tweet` and `TweetSkeleton` are now imported from `react-tweet/components`, and API utilities like `getTweet` are from `react-tweet/api`.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Ensure you are importing the base styles, for example, by adding `import 'react-tweet/styles';` to your root layout or entry file.","message":"Styling for react-tweet is often managed by importing a CSS file. If styles are missing, tweets may appear unformatted.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"No direct fix needed, but be aware of the change in rendering context for the time component. If custom date formatting is required on the client, you'll need to implement it yourself.","message":"The `date-fns` dependency was removed in v3.2.1, and the time component was refactored to be a server component. This might affect client-side rendering of tweet timestamps if your setup relied on client-side `date-fns` formatting.","severity":"breaking","affected_versions":">=3.2.1"},{"fix":"Always check if the result of `getTweet` is `undefined` before attempting to render the `Tweet` component. For example: `const tweet = await getTweet(id); if (!tweet) return <TweetNotFound />;`","message":"When `getTweet` encounters a private or non-existent tweet, it will log to the console and return `undefined`. Your application must handle this case gracefully.","severity":"gotcha","affected_versions":">=3.2.0"},{"fix":"Ensure your project uses React 18 or React 19 to satisfy peer dependency requirements and avoid potential warnings or issues.","message":"React 19 was added to peer dependencies in v3.2.2. While this primarily indicates compatibility, older versions of React might show peer dependency warnings.","severity":"breaking","affected_versions":">=3.2.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change `import { Tweet } from 'react-tweet';` to `import { Tweet } from 'react-tweet/components';` or `import { getTweet } from 'react-tweet/api';`.","cause":"Incorrect import path for components or API functions after v3.0.0.","error":"Module not found: Can't resolve 'react-tweet'"},{"fix":"If `Tweet` is a Server Component, the `key` prop should be applied to the parent element if mapping over a list, not directly to `Tweet` itself.","cause":"Using `key` prop directly on a `Tweet` component that is being rendered within a Server Component context.","error":"Error: Children of Server Components cannot have a `key` prop. Remove the `key` prop from your `Tweet` component."},{"fix":"Always verify that `getTweet` returns a valid tweet object before passing it to the `Tweet` component. Add checks like `if (!tweet) return null;`.","cause":"`rawTweet` prop passed to `Tweet` component is `undefined` or malformed, often because `getTweet` returned `undefined`.","error":"TypeError: Cannot read properties of undefined (reading 'media_details')"},{"fix":"Update to `react-tweet@3.1.0` or newer. Ensure styles are correctly imported, as `react-tweet/styles` provides the necessary icons.","cause":"Outdated version of `react-tweet` or missing styles, causing older assets to be displayed.","error":"Tweet media buttons still show 'Twitter' logo instead of 'X'."}],"ecosystem":"npm"}