Uncaught Invariant Violation: Minified invariant #4412; %s Params: %s

[aubreythreadgill]

I'm getting this error when completing a drag and drop of an <InstagramEmbed />. (video attached)

There's only one Google result for this invariant #4412. It's also related to the Instagram embed.js.

I've created a CodeSandbox

https://github.com/justinmahar/react-social-media-embed/assets/94575293/5f33ca3e-2b24-408a-ae85-5e35ce6cb80b

instagram-embed-dnd-c7nyhj?file=/src/App.tsx), with a subset of the code (had to remove TanStack Query / server.js).

Greatly appreciate any thoughts, suggestions, or hacks!

Aubrey

[justinmahar]

Hey @aubreythreadgill! This is definitely a weird one--well done, lol.

I'm thinking something funky is happening due to the way React is updating the page when rendering the new order of the items.

So the first thing that comes to mind is to ensure each embed's container has a unique key. I would make the key a combination of both 1) the post URL and 2) the index in the array (assuming it's an array of items). That way it will definitely re-render if you change its position.

Something like...

itemElems = items.map((item, itemIndex) => {
  return <div key={`${item.url}-index-${itemIndex}`}><InstagramEmbed ... /></div>
})

Does that make sense? See if giving them unique keys in that way prevents the weird errors you're seeing.

[justinmahar]

Just looked at the CodeSandbox, I see you're giving each a key={index}, so I'm thinking a stricter, more unique key for each one would be the way to go here

[justinmahar]

To modify the code from the sandbox:

{instagramUrls.map((link, index) => {
  return <InstagramEmbed key={`${link.url}-index-${index}`} url={link.url} frame={window} />;
})}

[justinmahar]

Here's a forked codesandbox with the new key: https://codesandbox.io/p/sandbox/react-instagram-embed-dnd-forked-88w8jp?file=%2Fsrc%2FApp.tsx

You can now reorder the items and each item that changes position will be re-embedded in its new spot.

[justinmahar]

Also just a heads up that I just updated the library moments ago to support YouTube Shorts as well:

npm i react-social-media-embed@latest

[aubreythreadgill]

Amazing!! Thank you so much, Justin. We can mark this one closed :)

P.S. I contacted the one other person who had the issue, and seemed to be a similar root cause.

[justinmahar]

You got it brother 🍻