React Twitter Embed Components

Common errors

• Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

  cause Attempting to use a named export as a default import, e.g., `import TwitterTimelineEmbed from 'react-twitter-embed';`
  fix Use named imports for all components: `import { TwitterTimelineEmbed } from 'react-twitter-embed';`

• TypeError: Cannot read properties of undefined (reading 'widgets') or similar errors related to `twttr`

  cause This usually indicates that the Twitter Widgets JavaScript (`widgets.js`) failed to load or initialize correctly before the component tried to render.
  fix Ensure you have a stable internet connection. If the issue persists, try wrapping your `react-twitter-embed` components in a `React.Suspense` boundary or implementing a fallback UI while waiting for the Twitter script to load. This library generally manages the script loading, but external factors can interfere.

• npm ERR! code ERESOLVE
  npm ERR! ERESOLVE unable to resolve dependency tree
  npm ERR! while resolving: your-app@1.0.0
  npm ERR! found: react@18.0.0
  npm ERR! peer react@"^16.0.0 || ^17.0.0" from react-twitter-embed@1.x.x

  cause You are using an older version of `react-twitter-embed` that does not declare compatibility with newer React versions (e.g., React 18) in its `peerDependencies`.
  fix Upgrade `react-twitter-embed` to the latest version (4.x.x currently) which declares compatibility with React 18, or downgrade your React version if an upgrade is not feasible.

Warnings

• gotcha The Twitter Widgets API relies on client-side JavaScript. Content embedded via `react-twitter-embed` will not be visible during server-side rendering (SSR) unless specific SSR handling is implemented to defer rendering until the client side or use a solution like `react-no-ssr`.
  Fix: For SSR applications, consider dynamically importing components with `next/dynamic` or `react-loadable` with `ssr: false`, or rendering the components only on the client side after the initial mount.
• breaking Version 2.0.1 introduced 'Multi-module distributions'. While the primary import path `from 'react-twitter-embed'` remains, this change might have affected environments that relied on specific internal module paths or non-standard bundling configurations prior to this version.
  Fix: Ensure your imports are consistent with the recommended `import { ComponentName } from 'react-twitter-embed';` pattern. If encountering module resolution issues, update your bundler configuration to correctly resolve packages from `node_modules`.
• gotcha A security vulnerability in a dependency was fixed in version 1.1.3. Users on older versions might be exposed to this vulnerability.
  Fix: Upgrade `react-twitter-embed` to version 1.1.3 or higher to ensure all known dependency vulnerabilities are patched.
• gotcha Twitter's Widgets API has rate limits and can occasionally fail to load or render content, especially if multiple widgets are loaded concurrently or if the user has ad blockers. The `react-twitter-embed` library itself does not inherently handle these API-level issues.
  Fix: Implement error boundaries around Twitter embed components to gracefully handle rendering failures. Consider lazy loading widgets or staggering their initialization if you have many on a single page.

Install

• npm install react-twitter-embed npm
• yarn add react-twitter-embed yarn
• pnpm add react-twitter-embed pnpm

Imports

• TwitterTimelineEmbed
  wrong:

  import TwitterTimelineEmbed from 'react-twitter-embed';

  correct:

  import { TwitterTimelineEmbed } from 'react-twitter-embed';

  All components are named exports, not default exports.
• TwitterTweetEmbed
  wrong:

  const TwitterTweetEmbed = require('react-twitter-embed').TwitterTweetEmbed;

  correct:

  import { TwitterTweetEmbed } from 'react-twitter-embed';

  Prefer ESM imports for modern React applications. CommonJS `require` might lead to issues with tree-shaking or module resolution in some bundler configurations.
• TwitterShareButton
  wrong:

  import { TwitterShareButton } from 'react-twitter-embed/dist/TwitterShareButton';

  correct:

  import { TwitterShareButton } from 'react-twitter-embed';

  The library provides a single entry point for all components since v2.0.1; direct imports from `dist` are generally unnecessary and not recommended.

Quickstart

This quickstart demonstrates embedding a Twitter timeline, a specific tweet, a share button, and a follow button in a React application using the core components provided by `react-twitter-embed`.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { 
  TwitterTimelineEmbed, 
  TwitterTweetEmbed, 
  TwitterShareButton, 
  TwitterFollowButton 
} from 'react-twitter-embed';

function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', padding: '20px' }}>
      <h1>My Twitter Embeds</h1>

      <h2>Recent Tweets (Timeline)</h2>
      <TwitterTimelineEmbed
        sourceType="profile"
        screenName="reactjs"
        options={{ height: 400 }}
      />

      <h2>Featured Tweet</h2>
      <TwitterTweetEmbed
        tweetId={'1567341851213031424'} // Example tweet ID for ReactJS
      />

      <h2>Share on Twitter</h2>
      <TwitterShareButton
        url={'https://react.dev'}
        options={{ text: 'Check out the new React docs!', via: 'reactjs' }}
      />

      <h2>Follow ReactJS</h2>
      <TwitterFollowButton
        screenName={'reactjs'}
      />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);