Issues when initialising hotjar with Next.js and Typescript

Question

I'm failing to initialize hotjar in my Next.js and TypeScript app using react-hotjar version 6.0.0 .

My steps include:

In the file _app.tsx

I import it using

import { hotjar } from 'react-hotjar';

Then I initialize it in the default function App as follows:

    useEffect(() => {
            hotjar.initialize(HJID, HJSV);
    }, [])

Yet when I run

next build && next export

I receive the following error:

Module parse failed: Identifier 'hotjar' has already been declared (11:13)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| ***
| 
> export const hotjar = ***
|   initialize: function initialize(id, sv) ***
|       hotjar(id, sv);
Import trace for requested module:
./node_modules/react-hotjar/index.js
> Build failed because of webpack errors

Any idea of what can be the reason for the failure?

Alternatively, can you point me to resources describing how to initialize hotjar in the TypeScript Next.js web app?

Answer 1

I encountered the same issue as well. To address the problem, I had to revert to a previous version. Currently, I'm using V 5.5.0.