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

Link to the code that reproduces this issue

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

To Reproduce

Start application with next dev
Check layout.tsx
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)

About this issue

Original URL
State: closed
Created 7 months ago
Reactions: 16
Comments: 20 (3 by maintainers)

Most upvoted comments

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

+28

AntonyJudeShaman on Nov 23, 2023

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" ]

+20

djshubs on Nov 21, 2023

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

Evavic44 on Jan 16, 2024

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",

kasyap-007 on Nov 28, 2023

Still not working in 14.0.4.

[!CAUTION] Cannot find module ‘@next/third-parties/google’ or its corresponding type declarations.

paqstd-dev on Dec 11, 2023

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",

renanleonel on Dec 11, 2023

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

huozhi on Dec 5, 2023

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

roryf on Nov 21, 2023

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

V-iktor on Jan 9, 2024

14.0.4-canary.40

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

DevYemi on Dec 20, 2023