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 ?
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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With