Can't resolve 'node:tty' with @sentry/nextjs

[magnattic]

Package + Version

• other: @sentry/nextjs

Version:

6.17.2

Description

I get the following error message when I start up my nextjs server:

<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'node:tty' in '/srv/.yarn/cache/supports-color-npm-9.2.1-1ef7bf7d73-8a2bfeb64c.zip/node_modules/supports-color'
frontend-marketplace_1            | <w> while resolving 'node:tty' in /srv/.yarn/cache/supports-color-npm-9.2.1-1ef7bf7d73-8a2bfeb64c.zip/node_modules/supports-color as file
frontend-marketplace_1            | <w>  at resolve esm file node:tty
frontend-marketplace_1            | <w>  at file dependencies /srv/.yarn/cache/supports-color-npm-9.2.1-1ef7bf7d73-8a2bfeb64c.zip/node_modules/supports-color/index.js
frontend-marketplace_1            | <w>  at file /srv/.yarn/cache/supports-color-npm-9.2.1-1ef7bf7d73-8a2bfeb64c.zip/node_modules/supports-color/index.js
frontend-marketplace_1            | <w>  at file dependencies /srv/.yarn/__virtual__/debug-virtual-c0583bf729/0/cache/debug-npm-4.3.3-710fd4cc7f-14472d56fe.zip/node_modules/debug/src/node.js
frontend-marketplace_1            | <w>  at file /srv/.yarn/__virtual__/debug-virtual-c0583bf729/0/cache/debug-npm-4.3.3-710fd4cc7f-14472d56fe.zip/node_modules/debug/src/node.js
frontend-marketplace_1            | <w>  at file dependencies /srv/.yarn/__virtual__/debug-virtual-c0583bf729/0/cache/debug-npm-4.3.3-710fd4cc7f-14472d56fe.zip/node_modules/debug/src/index.js
frontend-marketplace_1            | <w>  at file /srv/.yarn/__virtual__/debug-virtual-c0583bf729/0/cache/debug-npm-4.3.3-710fd4cc7f-14472d56fe.zip/node_modules/debug/src/index.js
frontend-marketplace_1            | <w>  at file dependencies /srv/.yarn/cache/@babel-core-npm-7.16.12-10529e0454-29b56f3cb7.zip/node_modules/@babel/core/lib/config/files/configuration.js
frontend-marketplace_1            | <w>  at file /srv/.yarn/cache/@babel-core-npm-7.16.12-10529e0454-29b56f3cb7.zip/node_modules/@babel/core/lib/config/files/configuration.js
frontend-marketplace_1            | <w>  at file dependencies /srv/.yarn/cache/@babel-core-npm-7.16.12-10529e0454-29b56f3cb7.zip/node_modules/@babel/core/lib/config/files/index.js
frontend-marketplace_1            | <w>  at file /srv/.yarn/cache/@babel-core-npm-7.16.12-10529e0454-29b56f3cb7.zip/node_modules/@babel/core/lib/config/files/index.js
frontend-marketplace_1            | <w>  at file dependencies /srv/.yarn/cache/@babel-core-npm-7.16.12-10529e0454-29b56f3cb7.zip/node_modules/@babel/core/lib/index.js
frontend-marketplace_1            | <w>  at file /srv/.yarn/cache/@babel-core-npm-7.16.12-10529e0454-29b56f3cb7.zip/node_modules/@babel/core/lib/index.js
frontend-marketplace_1            | <w>  at file dependencies /srv/.yarn/cache/@svgr-webpack-npm-6.2.0-be67a2d669-4fae0ee56c.zip/node_modules/@svgr/webpack/dist/index.js
frontend-marketplace_1            | <w>  at file /srv/.yarn/cache/@svgr-webpack-npm-6.2.0-be67a2d669-4fae0ee56c.zip/node_modules/@svgr/webpack/dist/index.js
frontend-marketplace_1            | <w>  at resolve commonjs /srv/.yarn/cache/@svgr-webpack-npm-6.2.0-be67a2d669-4fae0ee56c.zip/node_modules/@svgr/webpack/dist/index.js
frontend-marketplace_1            | error - ../.yarn/cache/@sentry-utils-npm-6.17.2-a379d6c2b8-15d2885a7d.zip/node_modules/@sentry/utils/esm/node.js:15:0
frontend-marketplace_1            | Module not found: Can't resolve 'process'
frontend-marketplace_1            |
frontend-marketplace_1            | Import trace for requested module:
frontend-marketplace_1            | ../.yarn/cache/@sentry-utils-npm-6.17.2-a379d6c2b8-15d2885a7d.zip/node_modules/@sentry/utils/esm/index.js
frontend-marketplace_1            | ../.yarn/__virtual__/@sentry-nextjs-virtual-5142bb441d/0/cache/@sentry-nextjs-npm-6.17.2-b70cd36533-69ecf035e1.zip/node_modules/@sentry/nextjs/esm/performance/client.js
frontend-marketplace_1            | ../.yarn/__virtual__/@sentry-nextjs-virtual-5142bb441d/0/cache/@sentry-nextjs-npm-6.17.2-b70cd36533-69ecf035e1.zip/node_modules/@sentry/nextjs/esm/index.client.js
frontend-marketplace_1            | ./src/api/sentry.ts
frontend-marketplace_1            | ./src/hooks/useUser.tsx
frontend-marketplace_1            | ./src/pages/_app.tsx

Here is the sentry.ts file in question that is causing this error:

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

type SentryUser = {
  id: string;
} | null;

/**
 * Method responsible for setting the sentry user to either a valid user or resetting it to null
 * @param user can be defined or null
 */
export const setSentryUser = (user: SentryUser) => {
  if (!user) {
    Sentry.configureScope((scope) => scope.setUser(null));
    return;
  }
  const { id } = user;
  Sentry.setUser({ id });
};

My sentry.client.config.js and sentry.server.config.js look pretty much like described in the docs.

My setup:

yarn 3.1.1 (with pnp)
nextjs 12.0.8

What I've tried

I have the supspicion this might be an issue with webpack 5 being used in nextjs which is not including node polyfills anymore. I am not sure why sentry would access tty or process in the browser, but it looks like that might be the issue here.

So in the next.config.js I tried to set a polyfill like this (after installing the corresponding package):

  webpack: (config) => {
    config.resolve.fallback = { tty: require.resolve('tty-browserify') };
  }

Which did not solve the problem.

I am confused as to why this is even happening, I would assume that sentry only accesses node packages while in an node environment?

[lobsterkatie]

Hi, @magnattic - thanks for writing in!

I am not sure why sentry would access tty or process in the browser, but it looks like that might be the issue here.

I believe you're correct and process is the problem. (The reason we'd try to access it from within the browser is precisely to see we get anything back, as this lets us tell which environment we're in:

sentry-javascript/packages/utils/src/node.ts

Lines 8 to 20 in 1792a5b

	/**
	* Checks whether we're in the Node.js or Browser environment
	*
	* @returns Answer to given question
	*/
	export function isNodeEnv(): boolean {
	// explicitly check for browser bundles as those can be optimized statically
	// by terser/rollup.
	return (
	!isBrowserBundle() &&
	Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) === '[object process]'
	);
	}

.)

I suspect that this is another version of this bug or this one. (More discussion here and here and here.) The upshot is that one of these lines (1, 2) in the next.js webpack config ought to be handling this.

I'm not going to close this yet, but I think perhaps the issue is on their end, and somehow one or both of those lines aren't executing or aren't working. Would you mind please raising this with them? Feel free to reference this issue, and I'll follow along there as well.

[github-actions]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

[eric-burel]

Hi, I think I am hitting a similar issue with sentry Next, but only during test in Cypress.
I feel like Next is handling that at build time, but not Cypress out of the box.

The following error originated from your test code, not from Cypress.

  > process is not defined

[vulcan-next/node_modules/next/dist/client/normalize-trailing-slash.js:10:1](http://localhost:3000/__/#)
> 10 | const normalizePathTrailingSlash = process.env.__NEXT_TRAILING_SLASH ? (path)=>{


at Object../node_modules/next/dist/client/normalize-trailing-slash.js ([webpack://vulcan-next/./node_modules/next/dist/client/normalize-trailing-slash.js:10:1](http://localhost:3000/__/#))
    at __webpack_require__ ([webpack://vulcan-next/webpack/bootstrap:19:1](http://localhost:3000/__/#))
    at Object../node_modules/next/dist/shared/lib/router/router.js ([webpack://vulcan-next/./node_modules/next/dist/shared/lib/router/router.js:15:31](http://localhost:3000/__/#))
    at __webpack_require__ ([webpack://vulcan-next/webpack/bootstrap:19:1](http://localhost:3000/__/#))
    at Object../node_modules/next/dist/client/router.js ([webpack://vulcan-next/./node_modules/next/dist/client/router.js:22:38](http://localhost:3000/__/#))
    at __webpack_require__ ([webpack://vulcan-next/webpack/bootstrap:19:1](http://localhost:3000/__/#))
    at Object../node_modules/next/router.js ([webpack://vulcan-next/./node_modules/next/router.js:1:1](http://localhost:3000/__/#))
    at __webpack_require__ ([webpack://vulcan-next/webpack/bootstrap:19:1](http://localhost:3000/__/#))
    at Object../node_modules/@sentry/nextjs/esm/performance/client.js (http://localhost:3000/__cypress/tests?p=cypress/integration/e2e/api.spec.ts:7003:70)
    at __webpack_require__ ([webpack://vulcan-next/webpack/bootstrap:19:1](http://localhost:3000/__/#))
    ```

Edit: exactly that Next has some magic to setup this variable but not Cypress.