Gatsby项目使用react-gtm-module出现TagManager.initialize报错如何解决

你误用了@loadable/component库：该库仅用于懒加载React组件，而react-gtm-module导出的TagManager是普通工具类对象，不是React组件。被loadable包裹后返回的是懒加载组件实例，因此不存在initialize方法。

方案1：直接静态导入（最简单） #

如果没有特殊的按需加载需求，直接改为常规导入即可正常使用：

import TagManager from 'react-gtm-module';

export const setupGtm = () => {
  if (typeof window !== 'undefined') {
    TagManager.initialize({
      gtmId: 'GTM-ID',
    });
  }
};

你可以直接在gatsby-browser.js的onClientEntry钩子中调用该方法，保证客户端初始化完成后自动加载GTM：

// gatsby-browser.js
import { setupGtm } from './你的工具文件路径';

export const onClientEntry = () => {
  setupGtm();
};

方案2：原生动态导入（如果需要按需加载） #

如果确实需要减少首包体积做动态加载，直接使用ES原生动态import语法即可，不需要用@loadable/component包裹：

export const setupGtm = async () => {
  if (typeof window !== 'undefined') {
    // 动态加载后取default导出
    const TagManager = (await import('react-gtm-module')).default;
    TagManager.initialize({
      gtmId: 'GTM-ID',
    });
  }
};

以上两种方案都可以保留你原有基于react-gtm-module的配置代码，不需要做额外改动。

内容的提问来源于stack exchange，提问作者CodeG