Replay module: Cannot find module './node_modules/rrweb/es/rrweb/packages/rrweb/src/entries/all.js'

[maxtomczyk]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/vue

SDK Version

7.29.0

Framework Version

Nuxt 3.0.0

Link to Sentry event

No response

Steps to Reproduce

1. Install @sentry/tracing & @sentry/vue in Nuxt 3.0.0 project

Expected Result

Sentry is working and Nuxt renders webpage

Actual Result

Nuxt responds with 500 status code.

Logs:

Listening http://[::]:3000
[nuxt] [request error] [unhandled] [500] Cannot find module './node_modules/rrweb/es/rrweb/packages/rrweb/src/entries/all.js'
Require stack:
- /home/max/Projects/<PROJECT_NAME>/.output/server/node_modules/@sentry/replay/cjs/replay.js
- /home/max/Projects/<PROJECT_NAME>/.output/server/node_modules/@sentry/replay/cjs/integration.js
- /home/max/Projects/<PROJECT_NAME>/.output/server/node_modules/@sentry/replay/cjs/index.js
- /home/max/Projects/<PROJECT_NAME>/.output/server/node_modules/@sentry/browser/cjs/index.js
- /home/max/Projects/<PROJECT_NAME>/.output/server/node_modules/@sentry/vue/cjs/index.js
  at Module._resolveFilename (node:internal/modules/cjs/loader:946:15)  
  at Module._load (node:internal/modules/cjs/loader:787:27)  
  at Module.require (node:internal/modules/cjs/loader:1012:19)  
  at require (node:internal/modules/cjs/helpers:102:18)  
  at Object.<anonymous> (./.output/server/node_modules/@sentry/replay/cjs/replay.js:9:1)  
  at Module._compile (node:internal/modules/cjs/loader:1112:14)  
  at Module._extensions..js (node:internal/modules/cjs/loader:1166:10)  
  at Module.load (node:internal/modules/cjs/loader:988:32)  
  at Module._load (node:internal/modules/cjs/loader:834:12)  
  at Module.require (node:internal/modules/cjs/loader:1012:19)
[nuxt] [request error] [unhandled] [500] Cannot find module './node_modules/rrweb/es/rrweb/packages/rrweb/src/entries/all.js'
Require stack:
- /home/max/Projects/<PROJECT_NAME>/.output/server/node_modules/@sentry/replay/cjs/replay.js
- /home/max/Projects/<PROJECT_NAME>/.output/server/node_modules/@sentry/replay/cjs/integration.js
- /home/max/Projects/<PROJECT_NAME>/.output/server/node_modules/@sentry/replay/cjs/index.js
- /home/max/Projects/<PROJECT_NAME>/.output/server/node_modules/@sentry/browser/cjs/index.js
- /home/max/Projects/<PROJECT_NAME>/.output/server/node_modules/@sentry/vue/cjs/index.js
  at Module._resolveFilename (node:internal/modules/cjs/loader:946:15)  
  at Module._load (node:internal/modules/cjs/loader:787:27)  
  at Module.require (node:internal/modules/cjs/loader:1012:19)  
  at require (node:internal/modules/cjs/helpers:102:18)  
  at Object.<anonymous> (./.output/server/node_modules/@sentry/replay/cjs/replay.js:9:1)  
  at Module._compile (node:internal/modules/cjs/loader:1112:14)  
  at Module._extensions..js (node:internal/modules/cjs/loader:1166:10)  
  at Module.load (node:internal/modules/cjs/loader:988:32)  
  at Module._load (node:internal/modules/cjs/loader:834:12)  
  at Module.require (node:internal/modules/cjs/loader:1012:19)

This bug is mentioned in #6553, but I'm not sure if it's tracked as issue is closed and bug still appears in latest release.

[reeem]

Similar error with @sentry/cli^2.11.0, @sentry/nextjs^7.29.0, next^13.0.2 and yarn 3.3.1

steps to reproduce:

1. start (next) dev server

[webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Resolving 'rrweb/es/rrweb/packages/rrweb/src/entries/all' in /Users/.../@sentry-replay-virtual-b637ba30d9/0/cache/@sentry-replay-npm-7.29.0-e553e78caf-539e18c128.zip/node_modules/@sentry/replay/cjs for build dependencies doesn't lead to expected result ...

[Lms24]

Hi, thanks for writing in!

@maxtomczyk did Replay ever work with Nuxt apps? Just trying to find out if this is a regression or it never worked to begin with. My context around Nuxt is very limited but on the top of your head do you think this might be a problem w.r.t browser APIs (which rrweb relies on heavily) being bundled into Server stuff?
Or actually, it's probably more about formats: I see that the require stack consists of CJS imports whereas the rrweb import is ESM. (EDIT: nope it's CJS, totally misleading, sorry)

@reem not sure if this is related (different framework and bundler) but let's see first before creating another issue. Did you perform a fresh install after 7.29.0 was released? If not, please try deleting your node_modules and reinstalling all dependencies. Otherwise, same question for you: Any chance, you're importing Replay on the server side?

Replay is just intended to be used on the client side, so we need to make sure, that it is not bundled on the server side.

[Lms24]

@maxtomczyk which yarn/npm version are you using?

[Lms24]

Asking because I'm suspecting that newer yarn versions might be causing this (as mentioned by @vire in #6691)

[Lms24]

Could anyone experiencing this problem with a Nuxt app point me to a minimal repro? We don't support this framework officially so I'd be interested in how you set it up. Doesn't have to be much, just how to get to the point to reproduce this error.

[maxtomczyk]

@Lms24 you're right. In my case sentry code was bundled into server side code (it worked in dev mode, so I didn't think something is wrong here). Setting plugin as client side only fixed error.

[jacklee814]

I can provide what error message shows up, I think there is something wrong with license-checker-webpack-plugin during the production build, I will keep checking.

react-scripts: 4.0.3

yarn run v1.22.19
$ craco build

Cannot find module '/home/runner/work/repo_name/node_modules/@sentry/replay/esm/node_modules/rrweb/package.json'
Require stack:
- /home/runner/work/repo_name/node_modules/license-checker-webpack-plugin/src/licenseUtils.js
- /home/runner/work/repo_name/node_modules/license-checker-webpack-plugin/src/index.js
- /home/runner/work/repo_name/craco.config.ts
- /home/runner/work/repo_name/node_modules/cosmiconfig-typescript-loader/dist/loader.js
- /home/runner/work/repo_name/node_modules/cosmiconfig-typescript-loader/dist/index.js
- /home/runner/work/repo_name/node_modules/@craco/craco/lib/config.js
- /home/runner/work/repo_name/node_modules/@craco/craco/scripts/build.js

EDIT:
I found the relative issus license-checker-webpack-plugin but seems the package is no longer maintained.

[Lms24]

@jacklee814 I see you're using craco (TIL) so I'm guessing that you added the license-checker-webpack-plugin to your webpack config? Did the workaraound in the issue you linked work for you?

I don't really see a reason as to why a tool would expect a package.json for these files at this location. We're basically just pulling rrweb files into @sentry/replay/(esm|cjs)/node_modules which should just be treated as normal modules of the Replay package.

[Lms24]

So to summarize the reports at this point:

• Nuxt: Seems like the issue was related to Replay being bundled into server-side bundles.
• NextJS: Still waiting on a reply if this might be caused by the same issue as Nuxt
• React/CRA: Might be caused by a bug in a webpack-plugin.

At this point, I don't see an immediate action we could take without more information. To everyone experiencing this issue, please leave a comment if you can provide more information.

[Joseph7451797]

@jacklee814 I see you're using craco (TIL) so I'm guessing that you added the license-checker-webpack-plugin to your webpack config? Did the workaraound in the issue you linked work for you?

I don't really see a reason as to why a tool would expect a package.json for these files at this location. We're basically just pulling rrweb files into @sentry/replay/(esm|cjs)/node_modules which should just be treated as normal modules of the Replay package.

Hi, I encountered similar issues recently. I use multiple Sentry packages and found the core package also wraps a library, tslib in its node_modules folder, and there's a package.json in it.

I'm unsure if the tslib was pulled into the folder manually or automatically, but it looks like a typical node package.
If rrweb is a normal module you used, how about using "lib" or other names to avoid confusion?
Another question, is there any specific reason not to list rrweb in Replay's dependency, like what be done in @Sentry/core's package.json?

[Lms24]

is there any specific reason not to list rrweb in Replay's dependency, like what be done in @Sentry/core's package.json?

Yes, we do not treat rrweb as a package-dependency anymore but merely as a dev dependency (which it is still listed as). The reason is that when we build our @sentry/replay package, we basically pull the rrweb code into our build output using rollup. We do this because we have to apply some local patches to rrweb because they're not yet merged into rrweb. The rrweb devs are also currently working on v2 but we know next to nothing about the major bump and it has some severe bundle size implications (#6655).

In contrast, tslib in core should be treated like a normal dependency, so I think it's okay that it has a package.json

If rrweb is a normal module you used, how about using "lib" or other names to avoid confusion?

I'm considering investigating this but by default, rollup just pulls it in under node_modules which is why we went for it. Perhaps there is a rollup option we could use to rename the directory.

[Lms24]

We think we've fixed this issue with #6817. This fix will be included in the next release which will happen in the coming days.