I am encountering issues with initializing hotjar in my Next.js and TypeScript application using react-hotjar version 6.0.0.
The steps I have taken so far are:
In the file _app.tsx
I have imported it using
import { hotjar } from 'react-hotjar';
Then, I attempted to initialize it within the default function App as shown below:
useEffect(() => {
hotjar.initialize(HJID, HJSV);
}, [])
However, upon running
next build && next export
I encountered 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
Do you have any insights into why this failure is occurring?
Alternatively, could you direct me to resources that explain how to properly initialize hotjar in a TypeScript Next.js web application?