next/script does not trigger onLoad callback when used with beforeInteractive strategy

Run next info (available from version 12.0.8 and up)

No response

What version of Next.js are you using?

11.1.2

What version of Node.js are you using?

14.15

What browser are you using?

Chrome

What operating system are you using?

Linux

How are you deploying your application?

next dev

Describe the Bug

According to the docs, onLoad callback of next/script component can be used either with beforeInteractive and afterInteractive strategies. But when using with beforeInteractive strategy, onLoad callback never gets called.

Expected Behavior

Expect onLoad callback to be called when loading script with beforeInteractive strategy

To Reproduce

Using the same example of the docs, with stripe script: hasLoaded is never set to true and stripe has loaded never gets printed. I get the same behavior in the latest version of next.

Here is a minimal reproducible repo: https://github.com/loft-br/before-interactive-on-load-bug

[akselinurmio]

Me and my team are struggling with this exact issue right now. I created the issue #33402 on documentation inconsistencies, but would also like to see some sort of a resolve to this.

Our use case is following: we use two next/script elements to load two external scripts: the first one loads a cookie consent SDK and the second loads our analytics library. Both of the script elements have their own onLoads for initialization.

The problem is that the analytics library depends on the cookie consent SDK, so we need to load and initialize that one first. Also, both of these scripts need to be initialized before any React useEffect hooks are run, because that’s where the tracking functions of the analytics library are to be used.

Now, because onLoads for these scripts are just silently ignored, we can’t do initialization on neither of these libraries.

[hemmachat]

We are having the same issue with beforeInteractive and onLoad as the code inside onLoad had never being executed.

Here is the sample code inside _app.tsx:

With a simple code inside script1.js to be

console.log('loading script1.js');

And script2.js:

console.log('loading script2.js');

Then we have the output of

loading script1.js
loading script2.js
afterInteractive onLoad()