@sentry/next.js 7.31 breaks Storybook build

[connor-baer]

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/nextjs

SDK Version

7.31.0

Framework Version

[email protected]

Link to Sentry event

No response

SDK Setup

import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  environment: process.env.NEXT_PUBLIC_ENV,
});

Steps to Reproduce

My project uses Next.js v12.2.5, Sentry v7.31, and Storybook v6.4.20. After upgrading to @sentry/nextjs v7.31, Storybook fails to build (see error below). The Next.js app builds fine.

Some components that are rendered in Storybook import Sentry. I've traced the issue to the removal of the browser field in the package.json file in #6753 which causes Storybook to attempt to import Node-specific code to the client bundle. Re-adding the field seems to fix the issue.

Expected Result

Storybook builds without error

Actual Result

ModuleNotFoundError: Module not found: Error: Can't resolve 'domain' in '/Users/<project>/node_modules/@sentry/nextjs/esm/server'
ERR! 
ERR! BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
ERR! This is no longer the case. Verify if you need this module and configure a polyfill for it.
ERR! 
ERR! If you want to include a polyfill, you need to:
ERR!    - add a fallback 'resolve.fallback: { "domain": require.resolve("domain-browser") }'
ERR!    - install 'domain-browser'
ERR! If you don't want to include a polyfill, you can use an empty module like this:
ERR!    resolve.fallback: { "domain": false }
ERR!     at /Users/<project>/node_modules/webpack/lib/Compilation.js:2016:28
ERR!     at /Users/<project>/node_modules/webpack/lib/NormalModuleFactory.js:798:13
ERR!     at eval (eval at create (/Users/<project>/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
ERR!     at /Users/<project>/node_modules/webpack/lib/NormalModuleFactory.js:270:22
ERR!     at eval (eval at create (/Users/<project>/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
ERR!     at /Users/<project>/node_modules/webpack/lib/NormalModuleFactory.js:434:22
ERR!     at /Users/<project>/node_modules/webpack/lib/NormalModuleFactory.js:116:11
ERR!     at /Users/<project>/node_modules/webpack/lib/NormalModuleFactory.js:670:25
ERR!     at /Users/<project>/node_modules/webpack/lib/NormalModuleFactory.js:855:8
ERR!     at /Users/<project>/node_modules/webpack/lib/NormalModuleFactory.js:975:5
ERR!     at /Users/<project>/node_modules/neo-async/async.js:6883:13
ERR!     at /Users/<project>/node_modules/webpack/lib/NormalModuleFactory.js:958:45
ERR!     at finishWithoutResolve (/Users/<project>/node_modules/enhanced-resolve/lib/Resolver.js:312:11)
ERR!     at /Users/<project>/node_modules/enhanced-resolve/lib/Resolver.js:386:15
ERR!     at /Users/<project>/node_modules/enhanced-resolve/lib/Resolver.js:435:5
ERR!     at eval (eval at create (/Users/<project>/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!     at /Users/<project>/node_modules/enhanced-resolve/lib/Resolver.js:435:5
ERR!     at eval (eval at create (/Users/<project>/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
ERR!     at /Users/<project>/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:87:43
ERR!     at /Users/<project>/node_modules/enhanced-resolve/lib/Resolver.js:435:5
ERR!     at eval (eval at create (/Users/<project>/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
ERR!     at /Users/<project>/node_modules/enhanced-resolve/lib/forEachBail.js:16:12
ERR!     at /Users/<project>/node_modules/enhanced-resolve/lib/AliasPlugin.js:125:14
ERR!     at next (/Users/<project>/node_modules/enhanced-resolve/lib/forEachBail.js:14:3)
ERR!     at forEachBail (/Users/<project>/node_modules/enhanced-resolve/lib/forEachBail.js:24:9)
ERR!     at /Users/<project>/node_modules/enhanced-resolve/lib/AliasPlugin.js:51:5
ERR!     at _next0 (eval at create (/Users/<project>/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:8:1)
ERR!     at eval (eval at create (/Users/<project>/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:30:1)
ERR!     at /Users/<project>/node_modules/enhanced-resolve/lib/Resolver.js:435:5
ERR!     at eval (eval at create (/Users/<project>/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
ERR!     at /Users/<project>/node_modules/enhanced-resolve/lib/Resolver.js:435:5
ERR!     at eval (eval at create (/Users/<project>/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
ERR!     at /Users/<project>/node_modules/enhanced-resolve/lib/Resolver.js:435:5
ERR!     at eval (eval at create (/Users/<project>/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
ERR!     at /Users/<project>/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:87:43
ERR!     at /Users/<project>/node_modules/enhanced-resolve/lib/Resolver.js:435:5
ERR!     at eval (eval at create (/Users/<project>/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
ERR!     at /Users/<project>/node_modules/enhanced-resolve/lib/Resolver.js:435:5
ERR!     at eval (eval at create (/Users/<project>/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!     at /Users/<project>/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:41:15
ERR!     at processTicksAndRejections (node:internal/process/task_queues:82:21)
ERR! resolve 'domain' in '/Users/<project>/node_modules/@sentry/nextjs/esm/server'
ERR!   Parsed request is a module
ERR!   using description file: /Users/<project>/node_modules/@sentry/nextjs/package.json (relative path: ./esm/server)
ERR!     Field 'browser' doesn't contain a valid alias configuration
ERR!     resolve as module
ERR!       /Users/<project>/node_modules/@sentry/nextjs/esm/server/node_modules doesn't exist or is not a directory
ERR!       /Users/<project>/node_modules/@sentry/nextjs/esm/node_modules doesn't exist or is not a directory
ERR!       looking for modules in /Users/<project>/node_modules/@sentry/nextjs/node_modules
ERR!         single file module
ERR!           using description file: /Users/<project>/node_modules/@sentry/nextjs/package.json (relative path: ./node_modules/domain)
ERR!             no extension
ERR!               Field 'browser' doesn't contain a valid alias configuration
ERR!               /Users/<project>/node_modules/@sentry/nextjs/node_modules/domain doesn't exist
ERR!             .mjs
ERR!               Field 'browser' doesn't contain a valid alias configuration
ERR!               /Users/<project>/node_modules/@sentry/nextjs/node_modules/domain.mjs doesn't exist
ERR!             .js
ERR!               Field 'browser' doesn't contain a valid alias configuration
ERR!               /Users/<project>/node_modules/@sentry/nextjs/node_modules/domain.js doesn't exist
ERR!             .jsx
ERR!               Field 'browser' doesn't contain a valid alias configuration
ERR!               /Users/<project>/node_modules/@sentry/nextjs/node_modules/domain.jsx doesn't exist
ERR!             .ts
ERR!               Field 'browser' doesn't contain a valid alias configuration
ERR!               /Users/<project>/node_modules/@sentry/nextjs/node_modules/domain.ts doesn't exist
ERR!             .tsx
ERR!               Field 'browser' doesn't contain a valid alias configuration
ERR!               /Users/<project>/node_modules/@sentry/nextjs/node_modules/domain.tsx doesn't exist
ERR!             .json
ERR!               Field 'browser' doesn't contain a valid alias configuration
ERR!               /Users/<project>/node_modules/@sentry/nextjs/node_modules/domain.json doesn't exist
ERR!             .cjs
ERR!               Field 'browser' doesn't contain a valid alias configuration
ERR!               /Users/<project>/node_modules/@sentry/nextjs/node_modules/domain.cjs doesn't exist
ERR!         /Users/<project>/node_modules/@sentry/nextjs/node_modules/domain doesn't exist
ERR!       /Users/<project>/node_modules/@sentry/node_modules doesn't exist or is not a directory
ERR!       /Users/<project>/node_modules/node_modules doesn't exist or is not a directory
ERR!       looking for modules in /Users/<project>/node_modules
ERR!         single file module
ERR!           using description file: /Users/<project>/package.json (relative path: ./node_modules/domain)
ERR!             no extension
ERR!               Field 'browser' doesn't contain a valid alias configuration
ERR!               /Users/<project>/node_modules/domain doesn't exist
ERR!             .mjs
ERR!               Field 'browser' doesn't contain a valid alias configuration
ERR!               /Users/<project>/node_modules/domain.mjs doesn't exist
ERR!             .js
ERR!               Field 'browser' doesn't contain a valid alias configuration
ERR!               /Users/<project>/node_modules/domain.js doesn't exist
ERR!             .jsx
ERR!               Field 'browser' doesn't contain a valid alias configuration
ERR!               /Users/<project>/node_modules/domain.jsx doesn't exist
ERR!             .ts
ERR!               Field 'browser' doesn't contain a valid alias configuration
ERR!               /Users/<project>/node_modules/domain.ts doesn't exist
ERR!             .tsx
ERR!               Field 'browser' doesn't contain a valid alias configuration
ERR!               /Users/<project>/node_modules/domain.tsx doesn't exist
ERR!             .json
ERR!               Field 'browser' doesn't contain a valid alias configuration
ERR!               /Users/<project>/node_modules/domain.json doesn't exist
ERR!             .cjs
ERR!               Field 'browser' doesn't contain a valid alias configuration
ERR!               /Users/<project>/node_modules/domain.cjs doesn't exist
ERR!         /Users/<project>/node_modules/domain doesn't exist
ERR!       /Users/connorbar/Projects/github.com/sumup/node_modules doesn't exist or is not a directory
ERR!       /Users/connorbar/Projects/github.com/node_modules doesn't exist or is not a directory
ERR!       /Users/connorbar/Projects/node_modules doesn't exist or is not a directory
ERR!       /Users/connorbar/node_modules doesn't exist or is not a directory
ERR!       /Users/node_modules doesn't exist or is not a directory
ERR!       /node_modules doesn't exist or is not a directory
ERR!       looking for modules in /Users/<project>/src
ERR!         single file module
ERR!           using description file: /Users/<project>/package.json (relative path: ./src/domain)
ERR!             no extension
ERR!               Field 'browser' doesn't contain a valid alias configuration
ERR!               /Users/<project>/src/domain doesn't exist
ERR!             .mjs
ERR!               Field 'browser' doesn't contain a valid alias configuration
ERR!               /Users/<project>/src/domain.mjs doesn't exist
ERR!             .js
ERR!               Field 'browser' doesn't contain a valid alias configuration
ERR!               /Users/<project>/src/domain.js doesn't exist
ERR!             .jsx
ERR!               Field 'browser' doesn't contain a valid alias configuration
ERR!               /Users/<project>/src/domain.jsx doesn't exist
ERR!             .ts
ERR!               Field 'browser' doesn't contain a valid alias configuration
ERR!               /Users/<project>/src/domain.ts doesn't exist
ERR!             .tsx
ERR!               Field 'browser' doesn't contain a valid alias configuration
ERR!               /Users/<project>/src/domain.tsx doesn't exist
ERR!             .json
ERR!               Field 'browser' doesn't contain a valid alias configuration
ERR!               /Users/<project>/src/domain.json doesn't exist
ERR!             .cjs
ERR!               Field 'browser' doesn't contain a valid alias configuration
ERR!               /Users/<project>/src/domain.cjs doesn't exist

[lforst]

Hi, thanks for this awesome error report! Pointing us toward the browser field helped a ton.

A fix will soon be released (probably within a day).

[connor-baer]

Awesome, thanks so much for the fast response!

[mwawrusch]

Also,
got this one with .31, might be the same error:

error - ./node_modules/@sentry/cli/js/helper.js:4:0
Module not found: Can't resolve 'child_process'

Import trace for requested module:
./node_modules/@sentry/cli/js/index.js
./node_modules/@sentry/webpack-plugin/src/index.js
./node_modules/@sentry/webpack-plugin/src/cjs.js
./node_modules/@sentry/nextjs/esm/config/webpack.js
./node_modules/@sentry/nextjs/esm/config/withSentryConfig.js
./node_modules/@sentry/nextjs/esm/index.js
./pages/_error.js

https://nextjs.org/docs/messages/module-not-found

[connor-baer]

Can confirm that this is fixed in v7.31.1.

[lforst]

@connor-baer Thanks for confirming!