Nextjs dont load infogram script

Question

I'm trying to insert an inforgram into my project and I have to paste the script and I dont know why it dosen't work.

I have all of my scripts into _app.js and it works fine, but I don't know why it dosen't load this script in particular... I mean, when I inspect the code, I can see the script but dosen't load the graphic.

I already tried to load it into componentDidMount inside _app (and it works) but crashes when I navigate to the site and also try like this:

<script dangerouslySetInnerHTML={{
  __html: `
    !function(e,i,n,s){var t="InfogramEmbeds",d=e.getElementsByTagName("script")[0];if(window[t]&&window[t].initialized)window[t].process&&window[t].process();else if(!e.getElementById(n)){var o=e.createElement("script");o.async=1,o.id=n,o.src="https://e.infogram.com/js/dist/embed-loader-min.js",d.parentNode.insertBefore(o,d)}}(document,0,"infogram-async")}} />

Thank you for any help.

My structure is:

- pages
  - _app.js
  - _document.js
  - _index.js

-components
- graphic
  - index.js

- public
 - static
   -hello.js ---> this is my script file!


_APP.JS:

import Head from "next/head";
import App from "next/app";
import React from "react";


export default class MyApp extends App {
   static async getInitialProps() {
    // code
 }

 render(){
     return(
       <div>
         <Head>
           <link href="https://fonts.googleapis.com/css?family=Montserrat|Seymour+One&display=swap" rel="stylesheet" />
           <title>En vivo</title>
           <script type="text/javascript" src="/static/hello.js"></script> // script to load
         </Head>
         <Graphic />
       </div>
     )
   }
 }


Graphic.js

import React from "react";

     function Graphic() {
       return (
         <>
           <div className="infogram-embed" data-id="f86abba0-e624-4ba7-ae51-ac8ab88c1bf7" data-type="interactive" data-title="Untitled dashboard"></div>
         </>
       );
     }

   export default Graphic;

Hello.js

   !function(e,i,n,s){var t="InfogramEmbeds",d=e.getElementsByTagName("script")[0];if(window[t]&&window[t].initialized)window[t].process&&window[t].process();else if(!e.getElementById(n)){var o=e.createElement("script");o.async=1,o.id=n,o.src="https://e.infogram.com/js/dist/embed-loader-min.js",d.parentNode.insertBefore(o,d)}}(document,0,"infogram-async")

Answer 1

Finally I fond a solution. I have to made changes in my Graphic component like this:

import React { useEffect, useState } from "react";

function Graphic(props) {
  const url = props.data;

  useEffect(() => {
    const script = document.createElement("script");

    script.src = !(function(e, i, n, s) {
      var t = "InfogramEmbeds",
        d = e.getElementsByTagName("script")[0];
      if (window[t] && window[t].initialized)
        window[t].process && window[t].process();
      else if (!e.getElementById(n)) {
        var o = e.createElement("script");
        (o.async = 1),
          (o.id = n),
          (o.src = "https://e.infogram.com/js/dist/embed-loader-min.js"),
          d.parentNode.insertBefore(o, d);
      }
    })(document, 0, "infogram-async");
    script.async = true;

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, [url]);

  return (
    <>
      {url.map(el => (
        <>
          <div
            className="infogram-embed"
            data-id={el.value}
            data-type="interactive"
            data-title="Untitled dashboard"
          ></div>
        </>
      ))}
    </>
  );
}

export default Graphic;

Nextjs dont load infogram script

Question

1 answers

solution1
0 2020-01-23 15:07:42

Nextjs dont load infogram script

Question

1 answers

solution1 0 2020-01-23 15:07:42

solution1
0 2020-01-23 15:07:42