The tag 'iframe' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-iframe' : NextJs

Question

We have facing issue on AMP error, please me error The tag 'iframe' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-iframe

Custom JavaScript is not allowed in AMP.

export const getAmpSocial = (body, router, liveBlogCheck) => {
  if (body) {
    body = body.replace(/<iframe[^>]*sandbox="allow-scripts" ?[^>]*>.*?<\/iframe>/gi, '');
  }
  const wpcomIframe = /<iframe\s+id="wpcom-iframe-[a-f0-9]+-[0-9]+-[0-9]+"\s+width="[^"]+"\s+height="[^"]+"\s+src="https:\/\/embeds\.indianexpress\.com\/protected-iframe\/[a-f0-9]+-[0-9]+-[0-9]+"\s+scrolling\s+frameborder="0"\s+class="wpcom-protected-iframe">\s+<\/iframe>/g;
}

Answer 1

This error is coming because your AMP page has iframe tags used without amp-iframe You can use regex to remove iframe from the body.

export const getAmpSocial = (body, router, liveBlogCheck) => {
  if (body) {
    // here we are removing iframes with sandbox attribute.
    body = body.replace(/<iframe[^>]*sandbox="allow-scripts" ?[^>]*>.*?<\/iframe>/gi, '');
    
    // here we replacing iframes with amp-iframe
    body = body.replace(/<iframe\s+id="wpcom-iframe-[a-f0-9]+-[0-9]+-[0-9]+"\s+width="([^"]+)"\s+height="([^"]+)"\s+src="(https:\/\/embeds\.indianexpress\.com\/protected-iframe\/[a-f0-9]+-[0-9]+-[0-9]+)"\s+scrolling\s+frameborder="0"\s+class="wpcom-protected-iframe">\s*<\/iframe>/g, 
    (match, width, height, src) => {
      return `<amp-iframe width="${width}" height="${height}" layout="responsive" sandbox="allow-scripts" src="${src}"></amp-iframe>`;
    });
  }
  return body;
};