Plugin doesn't work with module-federation in Next.js

[gabrielsch]

Environment

How do you use Sentry?
@sentry/nextjs (withSentryConfig) with webpack module-federation plugin.

Which SDK and version?
"@sentry/nextjs": "^6.16.1",

We're having issues while trying to use @sentry/nextjs within module-federation plugin. The issue below is definitely related to the module-federation since it works if we remove the plugin.

The error is:

(node:2353) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'source' of undefined
    at /app/node_modules/@sentry/webpack-plugin/src/index.js:118:28
    at Set.forEach (<anonymous>)
    at /app/node_modules/@sentry/webpack-plugin/src/index.js:109:29
    at Hook.eval [as call] (eval at create (/app/node_modules/next/dist/compiled/webpack/bundle5.js:141187:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (/app/node_modules/next/dist/compiled/webpack/bundle5.js:140999:14)
    at /app/node_modules/next/dist/compiled/webpack/bundle5.js:31003:38
    at /app/node_modules/next/dist/compiled/webpack/bundle5.js:31220:5
    at /app/node_modules/next/dist/compiled/neo-async/async.js:1:9380
    at done (/app/node_modules/next/dist/compiled/neo-async/async.js:1:14796)
    at /app/node_modules/next/dist/compiled/webpack/bundle5.js:31200:7

The plugin breaks here: https://github.com/getsentry/sentry-webpack-plugin/blob/master/src/index.js#L118

After doing some debugging, it looks like federated modules doesn't have a javascript source, causing rawSource to be undefined.

Below is a console.log of the sourceMap variable before the plugin clashing.

{
  sourceMap: Map(1) {
    'consume-shared' => RawSource {
      _valueIsBuffer: false,
      _value: 'function() { return loadFallback("default", "react", function() { return function() { return __webpack_require__(2784); }; }); }',
      _valueAsBuffer: undefined,
      _valueAsString: 'function() { return loadFallback("default", "react", function() { return function() { return __webpack_require__(2784); }; }); }'
    }
  }
}

Is there a way for "ignoring" federated modules? assuming those would have their own sentry handler on the app that is hosting it.

Thanks in advance!

[gabrielsch]

hey @kamilogorek after bumping this package to the latest version, we still have issues while building the nextjs app.

Here's the error:

(node:6193) UnhandledPromiseRejectionWarning: Error: No code generation entry for /Users/gabriel/Projects/foo/bar/node_modules/@sentry/nextjs/esm/index.client.js (existing entries:

The stacktrace is huge, but here's what I see at the bottom:

 at CodeGenerationResults.get (/Users/gabriel/Projects/foo/bar/node_modules/next/dist/compiled/webpack/bundle5.js:27659:10)
    at /Users/gabriel/Projects/foo/bar/node_modules/@sentry/webpack-plugin/src/index.js:115:63
    at Set.forEach (<anonymous>)
    at /Users/gabriel/Projects/foo/bar/node_modules/@sentry/webpack-plugin/src/index.js:109:29
    at Hook.eval [as call] (eval at create (/Users/gabriel/Projects/foo/bar/node_modules/next/dist/compiled/webpack/bundle5.js:141187:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/gabriel/Projects/foo/bar/node_modules/next/dist/compiled/webpack/bundle5.js:140999:14)
    at /Users/gabriel/Projects/foo/bar/node_modules/next/dist/compiled/webpack/bundle5.js:31003:38
    at /Users/gabriel/Projects/foo/bar/node_modules/next/dist/compiled/webpack/bundle5.js:31220:5
    at /Users/gabriel/Projects/foo/bar/node_modules/next/dist/compiled/neo-async/async.js:1:9380
    at done (/Users/gabriel/Projects/foo/bar/node_modules/next/dist/compiled/neo-async/async.js:1:14796)

can we re-open this issue? I'm wondering if we can opt-out from the webpack plugin? I guess we wouldn't get the sourcemaps uploads for free, right?

Thanks in advance.

[kamilogorek]

I'm wondering if we can opt-out from the webpack plugin?

Yes, you can use disableServerWebpackPlugin and disableClientWebpackPlugin options in your nextjs config under sentry namespace, when calling withSentryConfig middleware, see: https://github.com/getsentry/sentry-javascript/blob/master/packages/nextjs/src/config/webpack.ts#L73-L75

I guess we wouldn't get the sourcemaps uploads for free, right?

That's exactly what will happen.

It looks like something is incorrect with the webpack config itself, see: webpack/webpack#11829

[filmic]

If you use @sentry/webpack-plugin together withModuleFederationPlugin you have to set the name property:

new ModuleFederationPlugin({
  name: 'my-app',
  // other options
})

[john8329]

@filmic this helped me solve a similar issue with Angular 12, which would print Error: No code generation entry for [...] when building. Thanks a lot!