CORS error when calling getTweet

[Amargol]

Hey, this is a great package. Thanks so much for the effort you all put into this.

I'm trying to use the included getTweet function to get metadata for a tweet given it's tweet id. But I get the following CORS error:

However, when I use the <Tweet /> component directly and pass in the ID, it gets the metadata for the tweet just fine.

Why does the CORS error occur when I call getTweet myself, but when the component calls it for me, everything works fine?

[Amargol]

Here's the code I'm using

[Yugi-2]

I was able to resolve this by moving my getTweet wrapper function to a separate file and setting it as server action.

[iRajatDas]

getTweet works only in server side environment, try using server actions.

[wasifkareem]

Hi @iRajatDas , @Yugi-2 @Amargol , can you please elaborate, I'm trying to use gettweet() but its throwing cors, how to correctly set it in server action?? I have moved the the gettweet() wrapper function in separate folder and set it as "use server" , still throwing error

[matheussousaf]

This possibly means that you're trying to run getTweets on the client side. As it said in the documentation, getTweet is recommended to be ran server-side, so we're talking only server components or server-side rendered code.

If not, I'll recommend for you to switch to useTweet:

"use client";

import { useTweet, type Tweet as TweetType } from "react-tweet";
import { getTwitterId } from "@/utils/getTwitterId";

export default function TweetEmbed({ url }: { url: string }) {
  const id = getTwitterId(url);
  const { data: tweet, isLoading, error } = useTweet(id);

  if (isLoading) return <div>Loading…</div>;

  if (error || !tweet) return null;

  return (
    <div className="border border-gray-700 rounded-lg p-4 bg-gray-900/50 my-6"></div>
  );
}