NextJs - External synchronous scripts are forbidden

Question

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 ?

try using Script component nextjs.org/docs/basic-features/script — Siddharth Varangaonkar
– Siddharth Varangaonkar, Commented Nov 10, 2021 at 12:31
Issue solved by keeping the eslint validation to "extends": "next" — jpk
– jpk, Commented Nov 11, 2021 at 5:52

jpk · Accepted Answer · 2021-11-11 09:47:02Z

20

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

answered Nov 11, 2021 at 9:47

jpk

5102 gold badges4 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Munna Kumar Over a year ago

Yes' It work for me , i have modify the file .eslintrc.json with the same . it working thanks.

8ctopotamus Over a year ago

Worked for me in 2022!

juliomalves Over a year ago

To clarify, this works because the next ESLint configuration is less restrictive than the next/core-web-vitals one, and does not enable the rule @next/next/no-sync-scripts which is what triggered the error.

Vladick Kapkan · Accepted Answer · 2021-11-10 19:08:26Z

11

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

answered Nov 10, 2021 at 19:08

Vladick Kapkan

1192 bronze badges

3 Comments

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Akhilesh B Chandran Over a year ago

Here's more details about it: nextjs.org/docs/messages/no-sync-scripts

windmaomao Over a year ago

this is the wrong answer, because this is client side.

juliomalves · Accepted Answer · 2022-11-09 14:35:53Z

5

Modify ESLint configuration file, disable the no-sync-scripts rule mentioned by the error message works.

{
  "extends": "next/core-web-vitals",
  "rules": {
    "@next/next/no-sync-scripts": "off"
  }
}

edited Nov 9, 2022 at 14:35

juliomalves

51.1k23 gold badges180 silver badges170 bronze badges

answered Nov 3, 2022 at 6:54

tenhill

1361 silver badge5 bronze badges

Comments

Yilmaz · Accepted Answer · 2022-04-22 22:22:43Z

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'

answered Apr 22, 2022 at 22:22

Yilmaz

51k19 gold badges226 silver badges278 bronze badges

1 Comment

Janis Basis Basovs Over a year ago

Nice tips: Worked with <script defer src="xxxxxx" for me to load Google Places script in _document.ts in Nextjs. Thanks! PS. <Script> from next/script didnt worked for Google Places...

Mahadi Hassan · Accepted Answer · 2023-05-12 12:58:55Z

1

For nextjs, Instead of using use imported from next/script.

An example is given below :

import Script from 'next/script';

Use async or defer

<Script src="https://third-party-script.js" async />
<Script src="https://third-party-script.js" defer />

answered May 12, 2023 at 12:58

Mahadi Hassan

1,01612 silver badges10 bronze badges

Collectives™ on Stack Overflow

NextJs - External synchronous scripts are forbidden

5 Answers 5

3 Comments

3 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related