Uncaught TypeError: import_react_ga4.default.initialize is not a function

[julenr]

Hi,

With:
import ReactGA from 'react-ga4';
ReactGA.initialize('G-8XZ6X4KJQH');

I am having this error Uncaught TypeError: import_react_ga4.default.initialize is not a function

It seems to work if I use ReactGA.default.initialize('G-8XZ6X4KJQH');

using ESBuild 0.15.12

Thanks

[elrob]

I'm experiencing the same issue. Also using esbuild.

[layonferreira]

This is probably due to the fact that you have type: module in your package.json.
You can read more here
https://esbuild.github.io/content-types/#default-interop)

The workaround for our project was

import ReactGAFunctions from 'react-ga4'
const ReactGA = ReactGAFunctions.default

[nichita-pasecinic]

Did anyone managed to workaround this ?

[the-black-viper]

I have this problem and using the following in my tsconfig.app.json:

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2022",
    "useDefineForClassFields": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "types": ["vite/client"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,

    /* Path Alias */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src", "src/main.tsx"]
}

[codler]

Resolved in https://github.com/codler/react-ga4/releases/tag/v3.0.1
rel: #95