(next/script) onReady 'Undefined' in Dev, Works in Production

[jacobgraf]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.0.0: Mon Aug  1 06:32:20 PDT 2022; root:xnu-8792.0.207.0.6~26/RELEASE_ARM64_T6000
Binaries:
  Node: 16.17.0
  npm: 8.15.0
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 12.2.6-canary.5
  eslint-config-next: 12.2.5
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Brave Version 1.42.97 Chromium: 104.0.5112.102 (Official Build) (arm64)

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

When using the onReady method, the external JS is not available and returns undefined when running in dev mode. It works, as expected, in production build (both locally, and on Vercel)

<div id="contact-form"></div>
<Script
  src="https://www.cognitoforms.com/f/seamless.js"
  data-key="Gz67Fka35Eu5U4y5XthVrg"
  onReady={() => {
    Cognito.mount("216", "#contact-form");
  }}
/>

Expected Behavior

External script resources should be loaded and available before onReady fires.

Link to reproduction

https://github.com/jacobgraf/next-script-onready-issue

To Reproduce

Run development build and load the page. You will receive an Unhandled Runtime Error - ReferenceError: Cognito is not defined.

If you run a production build, Cognito is available when onReady fires and the form loads, as expected.

[SukkaW]

@jacobgraf

I can reproduce the issue, and I have identified the cause.

next/script's onReady is not concurrent rendering resilient, and you have enabled the reactStrictMode in your next.config.js. So the react strict mode revealed a race condition here (hence your issue). The issue is not happening in production mode, because react strict mode has no effect in production.

It should be a confirmed bug of Next.js.

[SukkaW]

I have tried to create a fix for the issue (see #40002), but I am afraid I can't make the test cases pass.

There are some fundamental flaws of next/script components (like next/script could execute side effects directly during the render phase, or there is no way to clear effect declared in useEffect). So basically if you have enabled strict mode, you will eventually hit race condition (like this one you reported) here and there...

For now, I could only recommend you load third-party script manually, without using next/script.

[jacobgraf]

Dang. I was hopeful! So do you think there will ever be a fix for this issue or is it just going to be an "it is what it is" thing with next/script.

In my example, what would be the recommended way to set this up without next/script so it's more reliable than the setTimeout hack?

[SukkaW]

Dang. I was hopeful! So do you think there will ever be a fix for this issue or is it just going to be an "it is what it is" thing with next/script.

In my example, what would be the recommended way to set this up without next/script so it's more reliable than the setTimeout hack?

@jacobgraf And actually, the third-party script you included also introduce some race condition!

Here I was trying to reproduce and debug your issue. Notice that Cognito is still undefined when CognitoConfiguration becomes an object during onLoad? The Cognito only becomes available during the second onReady call.

The double onReady is the race condition I want to solve in #40002, by avoiding the first onReady call.

[jacobgraf]

That's a good catch too! I'll ping them and see if they can fix that on their end too!

Any other tips or tricks for getting this fixed in the meantime while I wait for a more permanent fix or is my setTimeout hack the best way for now?

[SukkaW]

That's a good catch too! I'll ping them and see if they can fix that on their end too!

Any other tips or tricks for getting this fixed in the meantime while I wait for a more permanent fix or is my setTimeout hack the best way for now?

As you can see above, in development mode, Cognito will be undefined in the first onReady call, and will be available in the second onReady call. In production, there will be only one onReady call that Cognito is already available.

So you can add a falsy value check:

      <Script
        src="https://www.cognitoforms.com/f/seamless.js"
        onReady={() => {
          if (typeof Cognito !== 'undefined') {
            Cognito.mount("216", "#contact-form");
          }
        }}
      />

This will work for now (in both development and production mode) and will continue to work if #40002 is merged.

[jacobgraf]

Dang. I was hopeful! So do you think there will ever be a fix for this issue or is it just going to be an "it is what it is" thing with next/script.
In my example, what would be the recommended way to set this up without next/script so it's more reliable than the setTimeout hack?

@jacobgraf And actually, the third-party script you included also introduce some race condition!

Here I was trying to reproduce and debug your issue. Notice that Cognito is still undefined when CognitoConfiguration becomes an object during onLoad? The Cognito only becomes available during the second onReady call.

The double onReady is the race condition I want to solve in #40002, by avoiding the first onReady call.

Your onLoad method had a spelling error. Could this be the cause of the weird behavior?

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.