InstagramEmbed is loading forever on Next.js@13

[PiotrSzlagura]

Hi,

I have a problem with this package - I can't make it work with Next.js version 13. I tried using it with and without SSR, but whatever I do, I see it loading infinitely.

Component which I use to render this embed is as follows:

import { InstagramEmbed } from "react-social-media-embed";

function InstagramEmbedWrapper({ instagramPostUrl }) {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  if (!isMounted) {
    return null;
  }

  return (
    <div>
      <InstagramEmbed url={instagramPostUrl} debug />
    </div>
  );
}

I added debug prop to try and see what could cause this issue, but all I get in dev console is:

[2023-08-01T10:45:39.924Z]: check-script
[2023-08-01T10:45:39.925Z]: check-script
[2023-08-01T10:45:39.929Z]: load-script
[2023-08-01T10:45:39.942Z]: confirm-script-loaded

No error or warning is thrown.

Is there some trick I could try to make it work?

[AnnaRusu]

Exactly same issue for TwitterEmbed.

[vivekneem]

Any updates on this?

[FilipiRafael]

Hey there @PiotrSzlagura, @AnnaRusu and @vivekneem, did you fix this issue?

[sectsect]

In my case it looks like script loading is not working properly. As a temporary measure, I manually load the script to avoid the issue.

import Script from 'next/script';

{hasInstagramEmbed && (
  <Script
    id={`instagram-embed-${post.id}`}
    src="https://www.instagram.com/embed.js"
  />
)}

As @PiotrSzlagura commented, the console prints the following, but I think it's incorrect information.

[2024-01-06T11:56:33.854Z]: check-script
[2024-01-06T11:56:33.926Z]: check-script
[2024-01-06T11:56:34.205Z]: load-script
[2024-01-06T11:56:34.365Z]: confirm-script-loaded

[dominon12]

Same issue here with next@12.2.0 and react-social-media-embed@2.5.13. Instagram posts just don't load. Network tab suggests Instagram API returns 404.

[zecka]

In my case it was due to url format

Instead of using https://www.instagram.com/USER_NAME/reel/REEL_ID/ https://www.instagram.com/USER_NAME/p/POST_ID/

You should use https://www.instagram.com/reel/POST_ID/ https://www.instagram.com/p/POST_ID/