[9.1.7] How to embed a script using Head? #11466

hatchli · 2020-03-29T18:54:08Z

hatchli
Mar 29, 2020

As I understand from my SO question , I can use next/head to embed a script tag within a component of my React / Next JS app. So, I went about it as such:

import React, { Component } from "react";
...
import Head from "next/head";
export const Lead = props => {
  return (
...
        <Head>
          <script
            class="3758abc"
            type="text/javascript"
            src="https://cdn2.fake.com/Scripts/embed-button.min.js"
            data-encoded="1234sdkljfeiASD9A"
          ></script>
        </Head>
...
  );
};

Unfortunately, nothing rendered. I don't know if I'm missing something obvious here...
I'm using Next 9.1.7.

My _app.js looks like this:

import App, { Container } from "next/app";
import Page from "../components/Page";
import { ApolloProvider } from "react-apollo";
import withData from "../lib/withData";

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }
    // this exposes the query to the user
    pageProps.query = ctx.query;
    return { pageProps };
  }
  render() {
    const { Component, apollo, pageProps } = this.props;

    return (
      // <Container>
      <ApolloProvider client={apollo}>
        <Page>
          <Component {...pageProps} />
        </Page>
      </ApolloProvider>
      // </Container>
    );
  }
}

export default withData(MyApp);

And my _document looks like this:

import Document from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static getInitialProps = async ctx => {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        )
      };
    } finally {
      sheet.seal();
    }
  };
}

prashantchothani · 2020-04-25T13:46:42Z

prashantchothani
Apr 25, 2020

We are facing the same issues. The script is not loading because the Head loads after componentdidmount() which is not expected behaviour. Can anyone helpe ?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[9.1.7] How to embed a script using Head? #11466

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

[9.1.7] How to embed a script using Head? #11466

Uh oh!

hatchli Mar 29, 2020

Replies: 1 comment

Uh oh!

prashantchothani Apr 25, 2020

hatchli
Mar 29, 2020

prashantchothani
Apr 25, 2020