title: Why does the next.js Script tag with the beforeInteractive strategy don't load thirdParty script?
body: <p>I try to understand how the next.js Script tag with the strategy beforeInteractive works. For testing i just used lodash. But i keep getting a <strong>ReferenceError: _ is not defined</strong>. I thought when a script is loaded with beforeInteractive it should be globally available inside my page Component since it get injected into the initial Html from the server and i could use it for example in the useEffect hook to alter a div.
  Can someone explain to me why it's not working or what i'm doing wrong?
  I don't installed it via npm because im trying to figure out how it works.</p>
  <p>I have a simple _document.js and i added a Next.js script tag with the strategy beforeInteractive to this _document.js. The next.js docs says:
  <em>This strategy only works inside _document.js and is designed to load scripts that are needed by the entire site (i.e. the script will load when any page in the application has been loaded server-side).</em></p>
  <pre><code>import { Html, Head, Main, NextScript } from 'next/document'
  import Script from 'next/script'
  
  export default function Document() {
    return (
      &lt;Html&gt;
        &lt;Head /&gt;
        &lt;body&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
          &lt;Script
            src=&quot;https://unpkg.com/lodash@4.17.20&quot;
            strategy=&quot;beforeInteractive&quot;
          &gt;&lt;/Script&gt;
        &lt;/body&gt;
      &lt;/Html&gt;
    )
  }
  </code></pre>
  <p>Then i have a simple page Component inside the pages folder. I added the getServerSideProps function to use ServerSideRendering.</p>
  <p><em>If you export a function called getServerSideProps (Server-Side Rendering) from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps.</em></p>
  <pre><code>import Head from 'next/head';
  import {useEffect, useState} from 'react';
  
  const TestComponent = () =&gt; {
      const [change,setChange] = useState('not changed');
  
      useEffect(()=&gt; {
          console.log(_);
          setChange(_.join(['one','two'],' - '));
      });
  
      return (
          &lt;&gt;
              &lt;Head&gt;
                  &lt;title&gt;Test&lt;/title&gt;
              &lt;/Head&gt;
              &lt;div&gt;{change}&lt;/div&gt;
          &lt;/&gt;
      );
  };
  
  export async function getServerSideProps(context) {
      return {
        props: {},
      }
    }
  
  export default TestComponent;
  </code></pre>
  <p><strong>Update</strong></p>
  <p>Seems like it is indeed a bug which is fixed but not released yet
  <a href="https://github.com/vercel/next.js/discussions/37098" rel="nofollow noreferrer">https://github.com/vercel/next.js/discussions/37098</a></p>