sentry-javascript: Error to render page on NextJs 12 with fallback = true

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

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 16
  • Comments: 18 (5 by maintainers)

Commits related to this issue

Most upvoted comments

I just upgraded to @sentry/nextjs@6.15.0 and next@12.0.4. This issue still occurs:

 /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-11-17T15:33:58.695Z	978f68a0-36c3-482a-88fe-30ab1fab9a17	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: '/blog/melhor-tag-pedagio'
}
RequestId: 978f68a0-36c3-482a-88fe-30ab1fab9a17 Error: Runtime exited with error: exit status 1
Runtime.ExitError

😢

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

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: https://github.com/getsentry/sentry-javascript/blob/115b0f3c07efa755c8f90d32cfd1783a35451eba/packages/tracing/src/index.ts#L1.

I think the problem is here: https://github.com/getsentry/sentry-javascript/blob/8652e867c66d9eb0fc11f045eae5ad4aecef815b/packages/nextjs/src/config/webpack.ts#L63-L79 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.

Hello everyone,

We have made a change that fixes some issues with the Next.js server when deployed on Vercel. These are available in the latest release, v6.16.1. Could you try this new version and provide any feedback?

Thanks!

Can confirm that it works ok now, next version 12.0.4. Great work 👍

Pls keep in mind that the setting of output file tracing to false is only a temporary measure. This issue will have to be checked by the Sentry team if we want to have the fast deployments that Next12 is bringing.

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

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

Hello everyone,

We have made a change that fixes some issues with the Next.js server when deployed on Vercel. These are available in the latest release, v6.16.1. Could you try this new version and provide any feedback?

Thanks!

+1

Try this if you’re having MODULE_NOT_FOUND issues https://github.com/vercel/next.js/issues/30561#issuecomment-954032510.

@lobsterkatie any updates on this? Been following the other thread on next as well. Seems like this is really setting us back vercel/next.js#30561 (comment)

As referenced as this comment: https://github.com/getsentry/sentry-javascript/issues/4103#issuecomment-963223150 in a related issue it looks like a PR has been merged with a fix https://github.com/getsentry/sentry-javascript/pull/4027 a few hours ago. Looking at the changelog updates, looks like it’s slated for release w/6.15.