javascriptvariable-assignmentembedded-resource

Identifier * has already been declared, script is an external script


I am in the process of creating an embed for instagram posts. However when using the script: https://www.instagram.com/embed.js I get the following errors in the browser:

Localhost Environment:

Uncaught Invariant Violation: Minified invariant #4412; %s Params: %s
 at a (https://www.instagram.com/embed.js:58:366)
 at T (https://www.instagram.com/embed.js:62:3635)

Feature Branch Environment:

Uncaught SyntaxError: Identifier 'i' has already been declared
 at embed.js:1:1

The post is loaded into an iframe instead of a blockquote as the blockquote has issues with certain Safari browser versions.

Without the script the post still loads however the iframe does not size correctly. With the script the iframe sizes correctly on localhost despite the above error. However when pushed to a feature branch the script (whilst loaded) does not resize the post correctly/at all.

What would be the best way to workaround this?

I have tried to copy the script over into my repo and change the affected variable, but after that time consuming process the server would not load the file in its already minified state.

We are not using AMP solutions as we are trying to actively move away from that structure.

Any help is greatly appreciated.


Solution

  • Resolved this by adding a class name to the iframe to identify it and using the below code to resize the iframe to proper dimensions. No need for embed script that causes this issue:

    const instagramEmbed = () => {
      const embeds = document.getElementsByClassName('instagram-media')
      if (embeds.length > 0) {
        window.addEventListener('message', (event) => {
          if (event.origin !== 'https://www.instagram.com') return
          const data = JSON.parse(event.data)
          if (data?.type == 'MEASURE' && data?.details) {
            const height = data.details.height
            if (height) {
              const instaFrames = document.querySelectorAll(
                '.instagram-media iframe',
              )
              instaFrames.forEach((frame) => {
                if (frame.contentWindow === event.source) {
                  frame.style.height = `${height}px`
                }
              })
            }
          }
        })
      }
    }