[experimental] nextScriptWorkers doesn't work with GTM

[RigottiG]

Verify canary release

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

Provide environment information

   Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.4.0: Mon Feb 21 20:34:37 PST 2022; root:xnu-8020.101.4~2/RELEASE_X86_64
    Binaries:
      Node: 16.13.2
      npm: 8.1.2
      Yarn: 1.22.18
      pnpm: N/A
    Relevant packages:
      next: 12.1.5
      react: 17.0.2
      react-dom: 17.0.2

What browser are you using? (if relevant)

Chrome 100.0.4896.75

How are you deploying your application? (if relevant)

next dev

Describe the Bug

I'm trying to use worker strategy to load third party scripts, but it doesn't work properly. I follow the docs and set nextScriptWorkers: true flag in next.config.js, install partytown when requested, and set by third-party script strategy to worker, but it seems doesn't work.

 <Script
     strategy="worker"
     id="gtm"
     dangerouslySetInnerHTML={{
      __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
              new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
              j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
              'https://www.googletagmanager.com/gtm.js?id='+i+dl+'&gtm_auth=${process.env.NEXT_PUBLIC_GTM_AUTH}&gtm_preview=${process.env.NEXT_PUBLIC_GTM_PREVIEW}&gtm_cookies_win=x';f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','${process.env.NEXT_PUBLIC_GTM_ID}');`,
      }}
   />

Expected Behavior

Load third party scripts

To Reproduce

1. Set nextScriptWorkers: true flag
2. Set strategy to worker

[citypaul]

So I'm having the same issue. I can't 100% say that my issue is caused for the same reason, but I'm also trying to load GTM in the same way as the above. To add some extra information though, I see this console error:

97c128da-5954-4692-8154-f6980ab82c7c:2 SyntaxError: Unexpected token '<' (at (index):3:12)
    at new Function (<anonymous>)
    at Te (97c128da-5954-4692-8154-f6980ab82c7c:2:7499)
    at 97c128da-5954-4692-8154-f6980ab82c7c:2:18448

This is after I had the following in my __app.tsx:

 <Script id="google-analytics" strategy="worker">
        {`(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-****');`}
</Script>

Just incase this helps, here's the next info output for my setup:

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.4.0: Fri Mar 18 00:46:32 PDT 2022; root:xnu-8020.101.4~15/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.14.2
      npm: 8.5.0
      Yarn: 1.22.18
      pnpm: N/A
    Relevant packages:
      next: 12.1.5
      react: 18.0.0
      react-dom: 18.0.0

warn  - Latest canary version not detected, detected: "12.1.5", newest: "12.1.6-canary.2".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue

[housseindjirdeh]

Thanks for flagging this issue folks. Unfortunately the worker strategy doesn't yet work with inline scripts (I'm working on it: #36318).

In the meantime, you could store and access the GTM script from a static file in public/ until this issue gets resolved:

<Script
  strategy="worker"
  src="/scripts/gtm.js" // script stored in public/scripts/gtm.js
/>

[housseindjirdeh]

I'll be closing this issue in place of #36318, but please feel free to ask any more questions here if you have any 🙏

[RigottiG]

@housseindjirdeh I updated my Nextjs to 1.12.6 and tried using worker strategy but I'm facing an issue, I'm using Partytown but Partyproxy is making a lot of requests on each page I visit. I'm using Next so I don't have any configs for PartyTown, I just put my script's strategy as a worker

[housseindjirdeh]

@RigottiG Do you have a reproduction that shows this many requests happening in the worker? I can help you investigate why that's happening and figure out if we should file an issue on the Partytown repo :)

[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.