componentDidMount is executed before <Head /> inside render #12196

vinitgundeti · 2020-04-25T14:14:03Z

vinitgundeti
Apr 25, 2020

I need to use an external script instead of adding script tag in _document.js i need to add it in page where script is required.
I have added script tag inside <Head> in my page and handled configuration of external script inside componentDidMount
but the page is crashing with error the variable is not defined
the error is occured because the variable is defined inside script and the script is not loaded

To Reproduce

import React from 'react'
 import Head from 'next/head'
 export default class Video extends React.PureComponent {

 componentDidMount() {
 var element = document.querySelector(".player-container");

 var player = new MyPlayer.Player(element, {
      location: "https://somelocation.com"
    });
 }

render() {
 return (
   <div>
        <Head>
          <title>play</title>
          <script type="text/javascript" src="//www.example.com/cast_sender.js?loadCastFramework=1"></script>
          <script type="text/javascript" src="https://cdn.myth.myplayer.com/myplayer.js"></script>
        </Head>
        <div className="player-container">

        </div>
)
}
}

in above code MyPlayer is defined in external script
if you run this first time it will say MyPlayer is not defined and the title will also won't set
but after reloading the page it works

Expected behavior

componentDidMount need to execute after script loads so that i can get MyPlayer Object

System information

OS: macOS
Version of Next.js: 9.3.4

jamesmosier · 2020-05-12T00:54:59Z

jamesmosier
May 12, 2020

Since I wasn't able to test with the scripts in your example, I ran this test:

export default class Video extends React.PureComponent {
  componentDidMount() {
    console.log(window.google);
  }

  render() {
    return (
      <div>
        <Head>
          <title>play</title>
          <script
            src={`https://maps.googleapis.com/maps/api/js?key=${API_KEY}&libraries=places`}
            async
          ></script>
        </Head>
        <div className="player-container"></div>
      </div>
    );
  }
}

and I saw that when I had console.log(google); it would return undefined but if I put console.log(window.google) it would return the object as expected.

Have you tried this?

Otherwise, could you include the scripts you mentioned so it could be fully reproduced as you have it?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

componentDidMount is executed before <Head /> inside render #12196

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

componentDidMount is executed before <Head /> inside render #12196

Uh oh!

Uh oh!

vinitgundeti Apr 25, 2020

To Reproduce

Expected behavior

System information

Replies: 1 comment

Uh oh!

Uh oh!

jamesmosier May 12, 2020

vinitgundeti
Apr 25, 2020

jamesmosier
May 12, 2020