Next.js + react-gtm-module ReferenceError: document is not defined

Question

I use this piece to initialize GTM in my Next.js app:

const tagManagerArgs = {
  gtmId: "GTM-XXXXXX"
};
TagManager.initialize(tagManagerArgs);

But when I am trying to start an app with it I am getting the error:

ReferenceError: document is not defined
    at Object.dataScript (/Users/username/work/projectname/node_modules/react-gtm-module/dist/TagManager.js:11:18)

How to solve this?

Answer 1

Wrapping the piece of TagManager initializer with a checker helped:

if (process.browser) {
  TagManager.initialize(tagManagerArgs);
}

Answer 2

You can initialize TagManager right when the website has mounted to ensure that the DOM api is available

useEffect(()=>{
    TagManager.initialize({gtmId: 'GTM-XXXXXX'})
},[])