Error to render page on NextJs 12 with fallback = true

[Leocardoso94]

• Review the documentation: https://docs.sentry.io/
• Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• Use the latest release: https://github.com/getsentry/sentry-javascript/releases

Package + Version

• @sentry/nextjs

Version:

6.13.3

Description

This error is happening on Vercel when building a page with fallback = true

Example file:
page/test/[foo].tsx

import { useRouter } from 'next/router';

interface Props {
 foo: string;
}

const Page = ({foo}: Props) => {
 const router = useRouter();

 if (!router.isFallback) return 'loading';

 return <div>{foo}</div>;
};

export const getStaticProps: GetStaticProps<Props> = async () => ({
 props: {
 foo: 'bar',
 },
});

export const getStaticPaths: GetStaticPaths = async () => ({
 paths: [],
 fallback: true,
});

export default Page;

Stacktrace:

pages/_app.js
- /var/task/node_modules/next/dist/server/require.js
- /var/task/node_modules/next/dist/server/load-components.js
- /var/task/node_modules/next/dist/server/api-utils.js
- /var/task/node_modules/next/dist/server/next-server.js
- /var/task/___next_launcher.js
- /var/runtime/UserFunction.js
- /var/runtime/index.js
 at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
 at Function.Module._load (internal/modules/cjs/loader.js:667:27)
 at Module.require (internal/modules/cjs/loader.js:887:19)
 at require (internal/modules/cjs/helpers.js:74:18)
 at Object.<anonymous> (/var/task/node_modules/@sentry/tracing/dist/index.js:3:17)
 at Module._compile (internal/modules/cjs/loader.js:999:30)
 at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
 at Module.load (internal/modules/cjs/loader.js:863:32)
 at Function.Module._load (internal/modules/cjs/loader.js:708:14)
 at Module.require (internal/modules/cjs/loader.js:887:19) {
 code: 'MODULE_NOT_FOUND',
 requireStack: [
 '/var/task/node_modules/@sentry/tracing/dist/index.js',
 '/var/task/node_modules/@sentry/node/dist/handlers.js',
 '/var/task/node_modules/@sentry/node/dist/index.js',
 '/var/task/node_modules/@sentry/nextjs/dist/index.server.js',
 '/var/task/.next/server/pages/_app.js',
 '/var/task/node_modules/next/dist/server/require.js',
 '/var/task/node_modules/next/dist/server/load-components.js',
 '/var/task/node_modules/next/dist/server/api-utils.js',
 '/var/task/node_modules/next/dist/server/next-server.js',
 '/var/task/___next_launcher.js',
 '/var/runtime/UserFunction.js',
 '/var/runtime/index.js'
 ]
}
2021-10-26T19:04:54.319Z	02403834-2c2d-4a70-a204-75908b39ab0c	ERROR	Error: Cannot find module './browser'
Require stack:
- /var/task/node_modules/@sentry/tracing/dist/index.js
- /var/task/node_modules/@sentry/node/dist/handlers.js
- /var/task/node_modules/@sentry/node/dist/index.js
- /var/task/node_modules/@sentry/nextjs/dist/index.server.js
- /var/task/.next/server/pages/_app.js
- /var/task/node_modules/next/dist/server/require.js
- /var/task/node_modules/next/dist/server/load-components.js
- /var/task/node_modules/next/dist/server/api-utils.js
- /var/task/node_modules/next/dist/server/next-server.js
- /var/task/___next_launcher.js
- /var/runtime/UserFunction.js
- /var/runtime/index.js
 at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
 at Function.Module._load (internal/modules/cjs/loader.js:667:27)
 at Module.require (internal/modules/cjs/loader.js:887:19)
 at require (internal/modules/cjs/helpers.js:74:18)
 at Object.<anonymous> (/var/task/node_modules/@sentry/tracing/dist/index.js:3:17)
 at Module._compile (internal/modules/cjs/loader.js:999:30)
 at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
 at Module.load (internal/modules/cjs/loader.js:863:32)
 at Function.Module._load (internal/modules/cjs/loader.js:708:14)
 at Module.require (internal/modules/cjs/loader.js:887:19) {
 code: 'MODULE_NOT_FOUND',
 requireStack: [
 '/var/task/node_modules/@sentry/tracing/dist/index.js',
 '/var/task/node_modules/@sentry/node/dist/handlers.js',
 '/var/task/node_modules/@sentry/node/dist/index.js',
 '/var/task/node_modules/@sentry/nextjs/dist/index.server.js',
 '/var/task/.next/server/pages/_app.js',
 '/var/task/node_modules/next/dist/server/require.js',
 '/var/task/node_modules/next/dist/server/load-components.js',
 '/var/task/node_modules/next/dist/server/api-utils.js',
 '/var/task/node_modules/next/dist/server/next-server.js',
 '/var/task/___next_launcher.js',
 '/var/runtime/UserFunction.js',
 '/var/runtime/index.js'
 ],
 page: '/teste/121'
}
RequestId: 02403834-2c2d-4a70-a204-75908b39ab0c Error: Runtime exited with error: exit status 1
Runtime.ExitError

[dwest-teo]

This issue is also impacting Vercel deployments with Next.js API routes wrapped in withSentry. The Next.js team appears to have located the problem in this issue. Apparently the error is caused by importing the entire next module in @sentry/nextjs/dist/utils/instrumentServer.js

[nicholasgriffintn]

Yeah, the problem line is here: https://github.com/getsentry/sentry-javascript/blob/master/packages/nextjs/src/utils/instrumentServer.ts#L13

[rodilo]

Can confirm it. Pages with getServerSideProps don't work because of this.

[ThePaulMcBride]

Found the same issue. API endpoints or pages using Sentry do not work in Next v12. They return 500 errors.

[adikari]

I am having the same problem. any updates on the fix?

[lobsterkatie]

Hey, all.

First, sorry you're having trouble.

Second, Next 12 changes a lot of things, and given how new it is, we haven't yet had a chance to test all the different scenarios to find out exactly what in the SDK continues to work and what might need changing (or to then make those updates). Though we are working towards compatibility with Next 12, for now we're not guaranteeing compatibility with anything higher than Next 11.

Third, as to this issue...

The Next.js team appears to have located the problem in this issue. Apparently the error is caused by importing the entire next module in @sentry/nextjs/dist/utils/instrumentServer.js

Yeah, the problem line is here: https://github.com/getsentry/sentry-javascript/blob/master/packages/nextjs/src/utils/instrumentServer.ts#L13

It does seem that line may be causing a runtime issue, but I believe that's separate from this buildtime issue. If you look at the OP's stacktrace, it points to this line, from @sentry/tracing:

sentry-javascript/packages/tracing/src/index.ts

Line 1 in 115b0f3

import { BrowserTracing } from './browser';

.

I think the problem is here:

sentry-javascript/packages/nextjs/src/config/webpack.ts

Lines 63 to 79 in 8652e86

	// In webpack 5, you can get webpack to replace any module you'd like with an empty object, just by setting its
	// `resolve.alias` value to `false`. Not much of our code is neatly separated into "things node needs" and "things
	// the browser needs," but where it is, we can save ~1.6 kb in eventual bundle size by excluding code we know we
	// don't need. (Normally this would only matter for the client side, but because vercel turns backend code into
	// serverless functions, it's worthwhile to do it for both.)
	if (buildContext.webpack.version.startsWith('5')) {
	const excludedTracingDir = buildContext.isServer ? 'browser' : 'integrations/node';
	newConfig.resolve = {
	...newConfig.resolve,
	alias: {
	...newConfig.resolve?.alias,
	[path.resolve(buildContext.dir, `./node_modules/@sentry/tracing/esm/${excludedTracingDir}`)]: false,
	// TODO It's not clear if it will ever pull from `dist` (in testing it never does), so we may not need this.
	[path.resolve(buildContext.dir, `./node_modules/@sentry/tracing/dist/${excludedTracingDir}`)]: false,
	},
	};
	}

though I'm not yet sure exactly what's happening, and how fallback: true plays into it.

I'm away from my work computer at the moment, but once I get back I will see if removing that fixes the issue. It's there as a way to slightly decrease bundle size, but the savings isn't huge, so I'm happy to disable it for Next 12 if that fixes this issue.

[kevva]

Try this if you're having MODULE_NOT_FOUND issues vercel/next.js#30561 (comment).

[Leocardoso94]

Try this if you're having MODULE_NOT_FOUND issues vercel/next.js#30561 (comment).

After trying this, it works like a charm