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

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.

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()

The documentation does not use strategy="beforeInteractive" when loading a third-party, but your example did.

Removing that prop loads it correctly. So just curious if it was a misunderstanding or just a bad reproduction?

What is your use case by the way? What kind of third-party script do you try embedding with the beforeInteractive strategy?

Sorry if I’m missing something, but this is not about inline scripts at all. It is a third party script just like the example in the docs. Perhaps this part of the docs should be updated then if this is expected

Some third-party scripts require users to run JavaScript code after the script has finished loading in order to instantiate content or call a function. If you are loading a script with either beforeInteractive or afterInteractive as a loading strategy, you can execute code after it has loaded using the onLoad property:

This is expected. See https://github.com/vercel/next.js/issues/26343#issuecomment-900461742

Also related #28889

Sorry for all the confusion folks.

@davidbarker you are indeed correct that the documentation is wrong.onLoad does not work when used with the beforeInteractive strategy. Thanks for creating https://github.com/vercel/next.js/pull/36261 to add a note for this, we also have https://github.com/vercel/next.js/pull/36453 in the pipeline to fix that incorrect sentence.