react-tweet

library3.3.0jsnpmunverified

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.

communication web-framework

npm install react-tweet

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-TWEET

react-tweet

communicationjavascriptv3.3.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

✓ import { Tweet } from 'react-tweet/components';

✗ import { Tweet } from 'react-tweet';

Components are imported from the `/components` subpath, not the root, since v3.

getTweet

✓ import { getTweet } from 'react-tweet/api';

✗ import { getTweet } from 'react-tweet';

API functions like `getTweet` are imported from the `/api` subpath, not the root, since v3.

TweetSkeleton

✓ import { TweetSkeleton } from 'react-tweet/components';

✗ const { TweetSkeleton } = require('react-tweet');

Used for displaying a loading state. CommonJS `require` is not supported for these components.

Demonstrates fetching a tweet using `getTweet` and rendering it with the `Tweet` component, suitable for SSR/SSG contexts.

import { Tweet } from 'react-tweet/components'; import { getTweet } from 'react-tweet/api'; // This component is designed for server-side fetching (e.g., Next.js Server Components) // or client-side fetching with appropriate state management. async function MyTweetEmbed({ id }: { id: string }) { const tweet = await getTweet(id); if (!tweet) { return <p>Tweet not found or private.</p>; } return ( <div style={{ display: 'flex', justifyContent: 'center', width: '100%', margin: '20px 0' }}> <Tweet rawTweet={tweet} /> </div> ); } // Example usage in a React component: // <MyTweetEmbed id="1713028308833912089" /> // Remember to call `getTweet` in a server component or `useEffect` for client components.

Debug

Known issues

breakingVersion 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`.

fix

Update import statements: `import { Tweet } from 'react-tweet/components';` and `import { getTweet } from 'react-tweet/api';`.

affects: >=3.0.0

gotchaStyling for react-tweet is often managed by importing a CSS file. If styles are missing, tweets may appear unformatted.

fix

Ensure you are importing the base styles, for example, by adding `import 'react-tweet/styles';` to your root layout or entry file.

affects: >=3.0.0

breakingThe `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.

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.

affects: >=3.2.1

gotchaWhen `getTweet` encounters a private or non-existent tweet, it will log to the console and return `undefined`. Your application must handle this case gracefully.

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 />;`

affects: >=3.2.0

breakingReact 19 was added to peer dependencies in v3.2.2. While this primarily indicates compatibility, older versions of React might show peer dependency warnings.

fix

Ensure your project uses React 18 or React 19 to satisfy peer dependency requirements and avoid potential warnings or issues.

affects: >=3.2.2

Errors

Common errors & fixes

Module not found: Can't resolve 'react-tweet'

Incorrect import path for components or API functions after v3.0.0.

fix

Change `import { Tweet } from 'react-tweet';` to `import { Tweet } from 'react-tweet/components';` or `import { getTweet } from 'react-tweet/api';`.

Error: Children of Server Components cannot have a `key` prop. Remove the `key` prop from your `Tweet` component.

Using `key` prop directly on a `Tweet` component that is being rendered within a Server Component context.

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.

TypeError: Cannot read properties of undefined (reading 'media_details')

`rawTweet` prop passed to `Tweet` component is `undefined` or malformed, often because `getTweet` returned `undefined`.

fix

Always verify that `getTweet` returns a valid tweet object before passing it to the `Tweet` component. Add checks like `if (!tweet) return null;`.

Tweet media buttons still show 'Twitter' logo instead of 'X'.

Outdated version of `react-tweet` or missing styles, causing older assets to be displayed.

fix

Update to `react-tweet@3.1.0` or newer. Ensure styles are correctly imported, as `react-tweet/styles` provides the necessary icons.

Upgrade

Version history

3.3.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React applications.

react-domrequiredPeer dependency for rendering React components to the DOM.

Agent activity

19 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/vercel/react-tweet ↗

packagehttps://www.npmjs.com/package/react-tweet ↗

homepagehttps://react-tweet.vercel.app ↗