justinmahar/react-social-media-embed

InstagramEmbed is loading forever on Next.js@13

PiotrSzlagura opened this issue · 6 comments

PiotrSzlagura commented

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 commented

Exactly same issue for TwitterEmbed.

  • 👍2
vivekneem commented

Any updates on this?

FilipiRafael commented

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

sectsect commented

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
  • 👍2
dominon12 commented

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.

Screenshot_11