react-tweet: Tweet Not Found

1. This is because X is blocking those requests from common hosting providers so you want to get data locally or from the browser in a panel and then save that data in some sort of cache.

2. The solution is to use Manual Data Fetching locally on build time when you can access X API with getTweet(tweetId) and getTweet(tweetId). This can be done on localhost or in browser using user IP address.

3. When you get that data you want to cache it. I recommend Vercel/KV or Redis. I implemented it and I’m very happy how it’s working. There was only one issue when I was using Next.js App Router with static pages - check next point.

4. When using Next.js App Router with SSG/ISR (force-static) then the KV get call kv.get(tweetId) won’t work when you build it or deploy it to Vercel. The issue you will see would be:

Page changed from static to dynamic at runtime /ai/wordtune, reason: no-store fetch https://electric-XX-XXX.kv.vercel-storage.com /ai/[tool] see more here https://nextjs.org/docs/messages/app-static-to-dynamic-error

This is happening when you pnpm build and pnpm start locally or when you build and deploy on Vercel.

The solution to fix KV call on static pages is to refactor it to use Vercel KV REST API with caching options.

Example static friendly KV get call example:

// fetching tweets and caching in KV
  const TweetIds = ["1705688070941520030","1705162823003734354"]
  const tweets: Tweet[] = [];
  if (TweetIds) {
    for (const tweetId of TweetIds) {
      let kvTweet: Tweet | undefined | null = null;

      // check kv cache first
      try {
        const res = await fetch(
          `${process.env.KV_REST_API_URL}/get/tweet:${tweetId}`,
          {
            headers: {
              Authorization: `Bearer ${process.env.KV_REST_API_TOKEN}`,
            },
            cache: "force-cache",
            next: {
              tags: [`tweets`],
            },
          } as any
        );
        const json = await res.json();
        kvTweet = JSON.parse(json.result) as Tweet;
      } catch (err) {
        console.log(err);
        console.log("Error fetching tweet from KV");
      }

      if (kvTweet) {
        tweets.push(kvTweet);
      } else {
        // fetch tweet
        try {
          const tweet = await getTweet(tweetId);
          if (tweet) {
            tweets.push(tweet);
            // cache tweet in KV
            await kv.set(`tweet:${tweetId}`, tweet);
          }
        } catch (e) {
          console.warn(`Error fetching tweet ${tweetId} from X`);
          console.warn(e);
        }
      }
    }
  }

I’m experiencing the same issue at the moment

Surprisingly today, it worked on my website!! Nothing changed in my code…

Yeah I just checked my website and it’s working as well now… I made no changes to the code.

I got the issue resolved!!!.

I have an issue in development.

As you can see, the tweet is working fine is production but in development it says tweet not found or something like giving an network error:

Solution

The solution to this problem is using ‘use client’ in development and remove once you go into the production. As you know that the code is working in production but causing problems in development which causes problems in development.

'use client' // Remove this in production to get advantage of server components 

import { Tweet } from 'react-tweet'
 
export default function Page() {
  return <Tweet id="1628832338187636740" />
}

Result

Same here makes the package unusable for me

Yea hopefully someone from Vercel can take a look or give some guidance. I guess looking at the documentation for Next, I should be manually fetching this data since I generate static params for my articles?

I am manually fetching the data through a TRPC call and it still doesn’t work

Same here makes the package unusable for me

I am currently experiencing the same issue. Could it be related to the recent update to version 3.1.1? I also noticed that we can view the tweet locally but not in production.

Yea not entirely sure, but I even tried with the apiUrl route that they mention but shouldn’t need to use if I am in Next.js and then locally my tweets won’t load. What’s odd is I use this component in my Sanity studio to preview tweets and it works just fine… Not sure why on my website it doesn’t.