Confusion with Script inside _document file and no-script-in-document-page ESLint rule

[emiliosheinz]

I'm trying to add a Script with strategy="beforeInteractive" to my application. Reading the docs I saw that this strategy only works inside _document file. After adding the Script to the _document file ESLint started to complain about using scripts inside this file, this is caused by this rule.

Does anyone know which is the correct way of using scripts with strategy="beforeInteractive"? The NextJS docs seem to be ambiguous about it.

Some environment info:

NextJS: 12.1.6
eslint-config-next: 12.1.5

[icyJoseph]

Hi,

The NextJS family of packages ought to be at the same version, otherwise this kind of thing happens. Please update to eslint-config-next 12.1.6. The same applies if you have @next/bundle-analyzer.

A bug 🐛

In version 12.1.6, AFAIK, the beforeInteractive scripts in _document, are not really working... #37000, it has been fixed, but the fix was not as desired... #37225 (comment), there has been a bit of a back and forth... #37084, so for now, I'd say under 12.1.6, please use a regular script, and as soon as a new version comes out switch back to next/script with beforeInteractive set.

[emiliosheinz]

@icyJoseph Thank you for the quick response. What would be the equivalent of next/script with beforeInteractive inside _document?

[icyJoseph]

Right now, a plain <script></script> with its src set to what you need. When they release the fix, just upgrade it to <Script /> and put the beforeInteractive strategy on it.

<script
  type="text/javascript"
  src="https://unpkg.com/lodash@4.17.20/lodash.js"
></script>

[emiliosheinz]

Nice! Is there any specific place where I should place it? Now I have it inside _document file inside a Head tag, is this good to go?

[icyJoseph]

Wherever it works for you :) - I think inside Head is preferred though.

[emiliosheinz]

Ok, thank you for the help 🤙🏼