Error when using with next.js and typescript

[piotrpl]

I'm facing the following error when using the library (version 6.1.0) in my next.js & typescript app. I'm importing the lib using the following: import { hotjar } from 'react-hotjar';

In the main _app.tsx file and get the following error when building it:

/some/path/to/my/repo/client/node_modules/react-hotjar/index.js:1
import hotjarLib from './src/react-hotjar';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1195:20)
    at Module._compile (node:internal/modules/cjs/loader:1239:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)
    at Module.load (node:internal/modules/cjs/loader:1133:32)
    at Module._load (node:internal/modules/cjs/loader:972:12)
    at Module.require (node:internal/modules/cjs/loader:1157:19)
    at require (node:internal/modules/helpers:119:18)
    at 5716 (/some/path/to/my/repo/client/.next/server/pages/_app.js:1171:18)
    at __webpack_require__ (/some/path/to/my/repo/client/.next/server/webpack-runtime.js:25:42)

Is the problem on my side or is it related to the lib.

[abdalla]

I'm assuming this bug has been fixed on version 6.1.0.

[Shubham567]

not really,

[thugzook]

I'm assuming this bug has been fixed on version 6.1.0.

Wonder why this is closed? Having similar issues, Node 16.18.0, Nextjs 13

[forjoyilive]

I was able to use this solution to get it working, if it helps anyone.

In nextjs.config (for NextJS 13.1 and up):

module.exports = {
    transpilePackages: ['react-hotjar'],
    /* Your Next.js config */
};

[thugzook]

I was able to use this solution to get it working, if it helps anyone.

Cool thanks for sharing! This is a useful utility, but really only needed identify so I just decided to hardcode the utilities I needed like so.

_app.tsx

import * as hj from "../utils/hotjar";
function MyApp({
  Component,
  pageProps: { session, ...pageProps },
}: AppProps<{ session: Session }>) {

  const hotjarAnalytics =
    process.env.NODE_ENV === "production" ? (
      <>
        <Script
          id="init-hotjar"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: ` (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:${Number(hj.HJ_ID)},hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');`,
          }}
        />
      </>
    ) : (
      <></>
    );

  return (
    <>
      {hotjarAnalytics}
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

_hotjar.js

export const HJ_ID 
type HotjarIdentify = {
  userId: string;
  properties?: { [key: string]: string };
};

export const identify = ({userId, properties}:HotjarIdentify ) => {
  if (typeof (window as any).hj !== "undefined" && typeof(window as any).hj === 'function') {
    (window as any).hj(userId, properties);
  }
};

And of course, the same can be done for event, stateChange and others. Hope that helps whoever needs it.

[mattpwalsh]

Looks like starting with the 6.0 release this package is no longer being transpiled before pushing to npm. Not sure if that was/is intentional or not.

[sheldoncoates]

Looks like starting with the 6.0 release this package is no longer being transpiled before pushing to npm. Not sure if that was/is intentional or not.

I'm also seeing this as well - can this be reopened and fixed?

[mo-shawa]

Just ran into this with react-hotjar@6.1.0 and next@13.2.4. @forjoyilive 's solution didn't work 😞