Cannot find module '@next/third-parties/google' when trying to import GoogleTagManager

[renanleonel]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/musing-solomon-f4tnqz?file=%2Fapp%2Flayout.tsx%3A8%2C11

To Reproduce

1. Start application with next dev
2. Check layout.tsx
3. import error Cannot find module '@next/third-parties/google' or its corresponding type declarations.typescript(2307)

Current vs. Expected behavior

Expected: import work as intended in documentation https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries#google-tag-manager

Current: import not working

Verify canary release

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

Provide environment information

Node: v20.9.0
Next: 14.0.3,
React: 8.2.0
react-dom: 18.2.0,
npm: 10.1.0

Windows 11

Which area(s) are affected? (Select all that apply)

App Router

Additional context

Tested using next/canary, next v14 and nextv13, all with same problems.

after changing the import to import { GoogleTagManager } from '@next/third-parties/dist/google', the error goes away but when building the application i got an error because there is no exported module in node_modules@next\third-parties\dist\google.

package.json

Error message:

Failed to compile.
./src/app/layout.tsx
Module not found: Package path ./dist/google is not exported from package /tmp/build_6a78ac44/node_modules/@next/third-parties (see exports field in /tmp/build_6a78ac44/node_modules/@next/third-parties/package.json)

[djshubs]

I have the same error.

[roryf]

Although my editor highlights the error, it works as expected in development server, but build command fails locally and on vercel.

[djshubs]

Although my editor highlights the error, it works as expected in development server, but build command fails locally and on vercel.

I added the following in my tsconfig under paths, and its allowing me to build locally. Yet to test remote.

"@next/third-parties/google": [ "./node_modules/@next/third-parties/dist/google" ]

[AntonyJudeShaman]

Had the same issue with this import { GoogleTagManager } from '@next/third-parties/google'

Use npm install @next/third-parties or npm install @next/third-parties based on your package manager.

Now import the module GoogleTagManager and it lets you use it without any error in both local development and production.
It worked fine for me when i pushed it to Vercel

[kasyap-007]

This is due to the typescript's module resolution strategy. In typescript 5.0 new option was introduced and has been the recommended way if we use bundler's, new create-next-app uses this by default

update tsconfig.json to use "moduleResolution": "Bundler",

[z0n]

update tsconfig.json to use "moduleResolution": "Bundler",

That does indeed fix GTM but unfortunately breaks a different module import. Is this something package authors need to fix?

[djshubs]

update tsconfig.json to use "moduleResolution": "Bundler",

That does indeed fix GTM but unfortunately breaks a different module import. Is this something package authors need to fix?

I have Combobox from headlessui breaking because of it.

[huozhi]

We fixed it in v14.0.4-canary.40, please upragde!

[paqstd-dev]

Still not working in 14.0.4.

Caution

Cannot find module '@next/third-parties/google' or its corresponding type declarations.

[renanleonel]

Still not working in 14.0.4.

Caution

Cannot find module '@next/third-parties/google' or its corresponding type declarations.

added this to my tsconfig.json, under paths

"paths": { "@next/third-parties/google": [ "./node_modules/@next/third-parties/dist/google" ] }

and importing on layout.tsx

import { GoogleTagManager } from '@next/third-parties/google';

currently working on "next": "^14.0.4",

[paqstd-dev]

Still not working in 14.0.4.
Caution
Cannot find module '@next/third-parties/google' or its corresponding type declarations.

added this to my tsconfig.json, under paths

"paths": { "@next/third-parties/google": [ "./node_modules/@next/third-parties/dist/google" ] }

and importing on layout.tsx

import { GoogleTagManager } from '@next/third-parties/google';

currently working on "next": "^14.0.4",

Yes, that's what I did. That helped. Thank you.
But why not add this to the documentation then? This looks like a local crutch, but not a global one for everyone. Cause I'd like to use it out of the box

[renanleonel]

Still not working in 14.0.4.
Caution
Cannot find module '@next/third-parties/google' or its corresponding type declarations.

added this to my tsconfig.json, under paths
"paths": { "@next/third-parties/google": [ "./node_modules/@next/third-parties/dist/google" ] }
and importing on layout.tsx
import { GoogleTagManager } from '@next/third-parties/google';
currently working on "next": "^14.0.4",

Yes, that's what I did. That helped. Thank you. But why not add this to the documentation then? This looks like a local crutch, but not a global one for everyone. Cause I'd like to use it out of the box

i agree, tried without this tsconfig.json and didn't work. hope they'll fix it soon

[DevYemi]

14.0.4-canary.40

Hi there, i upgraded to v14.0.4-canary.40 and I'm still getting the same error

[danwild]

Noting this is a of #58458 (closed)

[ryancwalsh]

#58697 (comment) helped me with my static site. Thanks.

[V-iktor]

Not fixed in 14.0.4

Although my editor highlights the error, it works as expected in development server, but build command fails locally and on vercel.

I added the following in my tsconfig under paths, and its allowing me to build locally. Yet to test remote.

"@next/third-parties/google": [ "./node_modules/@next/third-parties/dist/google" ]

This works for me

[ETOPS7]

I added the following in my tsconfig under paths, and its allowing me to build locally. Yet to test remote.
"@next/third-parties/google": [ "./node_modules/@next/third-parties/dist/google" ]

This works for me

It helps me too (build as well), but I guess crutch. Good to wait for official solution.

[isaacdarcilla]

Although my editor highlights the error, it works as expected in development server, but build command fails locally and on vercel.

I added the following in my tsconfig under paths, and its allowing me to build locally. Yet to test remote.

"@next/third-parties/google": [ "./node_modules/@next/third-parties/dist/google" ]

This works for me "@next/third-parties": "^14.0.4",

[Evavic44]

As of the latest canary release, you no longer need the tsconfig hack, simply upgrade @next/third-parties to the latest canary version

npm i @next/third-parties@14.0.5-canary.59

And then imports should work as expected:

import { GoogleAnalytics } from "@next/third-parties/google";

Tested and working on next 14.0.4

[github-actions]

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