[Bug]: Unable to use rrweb on a NextJS app with Typescript

[dokgu]

Preflight Checklist

• [X] I have searched the issue tracker for a bug report that matches the one I want to file, without success.

What package is this bug report for?

rrweb

Version

2.0.0-alpha.4

Expected Behavior

After installing rrweb with yarn add rrweb, and importing into my component:

import * as rrweb from 'rrweb';

I should be able to start recording events:

let events = [];

useEffect(() => {
  rrweb.record({
    emit(event: any) {
      console.log(event);
      events.push(event);

      if (replayEvents.length > 100) {
        saveReplayEvents();
      }
    }
  });
}, []);

Actual Behavior

Following the official guide, I get the following error:

ReferenceError: exports is not defined in ES module scope This file is being treated as an ES module because it has a '.js' file extension and 'C:\project\node_modules\rrweb\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

Steps to Reproduce

1. Create a NextJS app (could be a simple React app as well)
2. Install rrweb yarn add rrweb
3. Import inside your component import * as rrweb from 'rrweb';
4. Start recording:

let events = [];

useEffect(() => {
  rrweb.record({
    emit(event: any) {
      console.log(event);
      events.push(event);

      if (replayEvents.length > 100) {
        saveReplayEvents();
      }
    }
  });
}, []);

Testcase Gist URL

No response

Additional Information

No response

[johannbuscail]

Hey @dokgu ! Have you managed to solve this issue ?

[gthomas3]

Encountered the same problem.

Not at all ideal, but ended up running it globally in _document.ts using the suggested Githubissues.

Githubissues is a development platform for aggregating issues.