Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 ?

like image 801
jpk Avatar asked Feb 16 '26 07:02

jpk


2 Answers

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

like image 67
jpk Avatar answered Feb 18 '26 21:02

jpk


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
like image 40
Vladick Kapkan Avatar answered Feb 18 '26 20:02

Vladick Kapkan