Next.js Discord

Discord Forum
\n {/* Scroll Timeline Polyfill */}\n \n \n \n
\n \n \n \n )\n }\n}\n\nexport default MyDocument---In another file, I am embedding a JS file from YouCanBookMe that generates an iframe with a booking calendar. This one is working, but I have to refresh the page to see it/run the script. If I simply navigate on the website, when I arrive on this page, the script doesn't run. \n
\n
\n

{appointments.title}

\n

{appointments.description}

\n
\n \n
\n
\n
\n This it is probably a newbie question, but for some time I have been trying a few options and no success until now... Thank you in advance for any help!","dateCreated":"2023-10-14T17:08:55.000Z","answerCount":6,"author":{"@type":"Person","name":"Checkered Giant"},"suggestedAnswer":{"@type":"Answer","text":"is this appdir or pages dir? if its pages dir can you try include your script inside _app.js file?","url":"https://nextjs-forum.com/post/1162799209301409963#message-1162827009953632448","dateCreated":"2023-10-14T18:59:23.000Z","author":{"@type":"Person","name":"Mossyrose gall wasp"}}}}

How do I include a <script> tag/external dependency on next13?

Unanswered
Checkered Giant posted this in #help-forum
Open in Discord
Checkered GiantOP
I need help with embedding <script> tags on next.

For some reason, when I try to import the "Scroll Timeline Polyfill" js file below, it works locally, but not on the live website.

I've tried to use <Script> but it was also not working.

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initalProps = await Document.getInitialProps(ctx)

    return initalProps
  }

  render() {
    return (
      <Html lang='en'>
        <Head>
          <script async src='https://identity.netlify.com/v1/netlify-identity-widget.js'></script>
          {/* Scroll Timeline Polyfill */}
          <script defer src='https://thegoldenhealing.online/scroll-timeline-polyfill.js'></script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

---

In another file, I am embedding a JS file from YouCanBookMe that generates an iframe with a booking calendar. This one is working, but I have to refresh the page to see it/run the script. If I simply navigate on the website, when I arrive on this page, the script doesn't run.

      <Layout>
        <section className="section section--text_only">
          <div className="section__content" style={{ width: '100%', textAlign: 'center' }}>
            <h1>{appointments.title}</h1>
            <p>{appointments.description}</p>
            <div style={{ minHeight: '60vh' }}>
              <script src="https://embed.ycb.me" async data-domain="thegoldenhealing"></script>
            </div>
          </div>
        </section>
      </Layout>


This it is probably a newbie question, but for some time I have been trying a few options and no success until now... Thank you in advance for any help!

6 Replies

Mossyrose gall wasp
is this appdir or pages dir? if its pages dir can you try include your script inside _app.js file?
Checkered GiantOP
it's pages dir. I think the scroll timeline file is being loaded now, although the polyfill is not really working, but the file has been download.

Can you help me with the 2nd code block? Thank you
@Checkered Giant it's pages dir. I think the scroll timeline file is being loaded now, although the polyfill is not really working, but the file has been download. Can you help me with the 2nd code block? Thank you
Mossyrose gall wasp
im not sure this solution but maybe you just give it try code generated by chatGBT:
import { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    // Create a script element
    const script = document.createElement('script');

    // Set the script's src attribute to the URL of the script you want to load
    script.src = 'https://example.com/your-script.js';

    // Add an event listener to handle the script's load or error event
    script.addEventListener('load', () => {
      // The script has successfully loaded
      console.log('Script has loaded.');
    });

    script.addEventListener('error', () => {
      // An error occurred while loading the script
      console.error('Script failed to load.');
    });

    // Append the script element to the document's head
    document.head.appendChild(script);

    // Cleanup function to remove the script when the component unmounts
    return () => {
      document.head.removeChild(script);
    };
  }, []); // The empty dependency array ensures this effect runs once on mount

  return (
    <div>
      {/* Your component's content */}
    </div>
  );
};

export default MyComponent;
Checkered GiantOP
Funny, I've asked chat gpt a few times and I couldn't get a working version lol
I was able to load the script like this:
  useEffect(() => {
    const script = document.createElement('script');

    script.src = 'https://embed.ycb.me';
    script.setAttribute('data-domain', 'thegoldenhealing')
    document.getElementById('embed').appendChild(script);
  }, []); // The empty dependency array ensures this effect runs once on mount


and I've added a div with "embed" id to load the iframe on this element: 
<div id="embed" style={{ minHeight: '60vh' }} />


Thank you for the help, very appreciated!
Mossyrose gall wasp
very happ to help 😄