Unhandled Runtime Error TypeError: Cannot read property 'tagName' of null using the new Next/Script feature

Rop89 commented 3 years ago

What version of Next.js are you using?

11

What version of Node.js are you using?

v16.3.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

Hi

I am trying to use the new Script tag from the new NextJS 11 version.

I have a simple component with a Trustpilot trustbox that accesses a script provided by them.

Upon loading this is the error I am getting:

Uncaught (in promise) TypeError: Cannot read property 'tagName' of null
    at updateElements (head-manager.ts?0645:65)
    at eval (head-manager.ts?0645:121)
    at Array.forEach (<anonymous>)

This happens in any strategy property I add.

Expected Behavior

I would expect the script to load correctly and show the trustpilot logo

To Reproduce

import { render } from "preact";
import React from "react";
import Script from "next/script";
import Head from "next/head";

import styles from "./Trustpilot.module.css";

export default class Trustpilot extends React.Component {
  render() {
    return (
      <>
        <Head>
          <Script
            src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js"
            strategy="beforeInteractive"
          />
          <></>
        </Head>

        <div class={styles.trustpilot}>
          {/* <!-- TrustBox widget - Micro Combo --> */}
          <div
            class="trustpilot-widget"
            data-template-id="someid"
            data-businessunit-id="someid"
            data-style-height="20px"
            data-style-width="100%"
            data-theme="light"
          >
          {/* <!-- End TrustBox widget --> */}
        </div>
      </>
    );
  }
}

yunghzz35 commented 3 years ago

Duplicate issue #26158

balazsorban44 commented 2 years ago

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

vercel / next.js