'NextJs - External synchronous scripts are forbidden

I am using nextJs version 11.x

When trying to include an external script like below, getting an error when executing the yarn build.

<Head>
<link rel="stylesheet" type="text/css" href="http://www.externalsite.com/style.css" />
<script src="https://www.websote.com/viewer.min.js"></script>
</Head>

Error :

./pages/_app.js
63:17  Error: External synchronous scripts are forbidden. See: https://nextjs.org/docs/messages/no-sync-scripts.  @next/next/no-sync-scripts

I am using eslint.

So, how can we include this external js ?

reactjs next.js

Solution 1:^[1]

Resolved the problem.

It was happening because of eslint strict configuration. Now I changed this to Base.

Modified content in this file .eslintrc

Earlier the value was

   {
   "extends": "next/core-web-vitals"
   }

Now changed the content to

 {
 "extends": "next"
 }

Thanks for the Help

Solution 2:^[2]

import Script from 'next/script'

const Home = () => {
    return (
      <div class="container">
        <Script src="https://third-party-script.js"></Script>
        <div>Home Page</div>
      </div>
    )
}

export default Home

Solution 3:^[3]

If you are using <script></script> inside _document.js use async or defer keyword

        <script
            defer
            src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossOrigin="anonymous"
       ></script>

          <script
            async
            src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
            integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
            crossOrigin="anonymous"
          ></script>

If in your component, use this

import Script from 'next/script'

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	jpk
Solution 2	Vladick Kapkan
Solution 3	Yilmaz

'NextJs - External synchronous scripts are forbidden

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]