[experimental] nextScriptWorkers doesn't work with GTM

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

[github-actions[bot]]

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.