vercel / react-tweet

Embed tweets in your React application.

Home Page:https://react-tweet.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Previously working tweets now crashing on getTweetUrl call

awitherow opened this issue · comments

react-tweet version 3.1.0, 3.0.4 as well.
nextjs 13.4.7

These 3 tweets

export const TWEETS = ["1689246608557547520", "1688132424012627968", "1689018484343083008"];

https://twitter.com/aryarsh11/status/1689018484343083008
https://twitter.com/its_justmedude/status/1689246608557547520
https://twitter.com/_AlexAstro/status/1688132424012627968

were working for the last 2 weeks on my site and now my site is crashing with the following error

- error node_modules/react-tweet/dist/utils.js (1:63) @ screen_name
- error TypeError: Cannot read properties of undefined (reading 'screen_name')
    at stringify (<anonymous>)
null
digest: "4154291835"

-  ┌ GET / 200 in 1745ms
   │
   ├──── GET https://cdn.syndication.../tweet-result?id=168924660855.. 200 in 102ms (cache: MISS)
   │
   ├──── GET https://cdn.syndication.../tweet-result?id=168813242401.. 200 in 108ms (cache: MISS)
   │
   └──── GET https://cdn.syndication.../tweet-result?id=168901848434.. 200 in 109ms (cache: MISS)

I suspected it was the first tweet because of the deleted retweet, but when I try on any tweet from my timeline it does not seem to work.

Here is the code that references it (which has been unchanged for 2 weeks now).

import { CURRENT_USER_COUNT, TWEETS } from "@/constants";
import { Tweet } from "react-tweet";

export default async function Feedback() {
  return (
    <div className="my-8 md:my-16 lg:my-24 max-w-7xl mx-auto">
      <div className="max-w-3xl mx-auto">
        <h2 className="text-3xl/snug sm:text-4xl/snug font-bold tracking-tight mb-4">
          What are people saying about Scale Sleek?
        </h2>
        <p className="mb-6">
          Since our launch, we&apos;ve had over {CURRENT_USER_COUNT} users sign up for our service. Here&apos;s what
          some of them have to say about our service. We hope to add your testimonial soon!
        </p>
      </div>
      <div className="text-left mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {TWEETS.map((tweetId) => (
          <Tweet key={tweetId} id={tweetId} />
        ))}
      </div>
    </div>
  );
}

I've tried it as a client component as well as a prelim debug step and it did not work either.

"use client"

import { CURRENT_USER_COUNT, TWEETS } from "@/constants";
import { Tweet } from "react-tweet";

export default function Feedback() {
  return (
    <div className="my-8 md:my-16 lg:my-24 max-w-7xl mx-auto">
      <div className="max-w-3xl mx-auto">
        <h2 className="text-3xl/snug sm:text-4xl/snug font-bold tracking-tight mb-4">
          What are people saying about Scale Sleek?
        </h2>
        <p className="mb-6">
          Since our launch, we&apos;ve had over {CURRENT_USER_COUNT} users sign up for our service. Here&apos;s what
          some of them have to say about our service. We hope to add your testimonial soon!
        </p>
      </div>
      <div className="text-left mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {TWEETS.map((tweetId) => (
          <Tweet key={tweetId} id={tweetId} />
        ))}
      </div>
    </div>
  );
}

Please upgrade to latest (3.1.1) which introduces this patch and let me know if it keeps failing!

Please upgrade to latest (3.1.1) which introduces this patch and let me know if it keeps failing!

Fixed it for me!

commented

Fixed for me as well! Thanks for posting

@lfades ur a legend. works for me 🙌