Error to render page on NextJs 12 with fallback = true #4090

Leocardoso94 · 2021-10-26T19:07:00Z

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

The text was updated successfully, but these errors were encountered:

dwest-teo · 2021-10-26T19:22:28Z

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 · 2021-10-26T19:33:22Z

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

rodilo · 2021-10-26T19:52:05Z

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

ThePaulMcBride · 2021-10-26T20:35:23Z

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

adikari · 2021-10-28T14:41:02Z

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

lobsterkatie · 2021-10-29T00:56:41Z

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 · 2021-10-29T07:06:59Z

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

Leocardoso94 · 2021-10-29T14:46:38Z

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

After trying this, it works like a charm

mataspetrikas · 2021-11-03T10:24:39Z

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.

shivashp · 2021-11-04T16:26:50Z

+1

adikari · 2021-11-16T05:11:33Z

@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)

neverether · 2021-11-16T06:00:08Z

@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: #4103 (comment) in a related issue it looks like a PR has been merged with a fix #4027 a few hours ago. Looking at the changelog updates, looks like it's slated for release w/6.15.

DavidChouinard · 2021-11-16T21:47:44Z

@Leocardoso94 can you confirm this issue has been resolved with 6.15?

Leocardoso94 · 2021-11-17T15:38:02Z

I just upgraded to @sentry/[email protected] and [email protected]. 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

😢

github-actions · 2021-12-09T15:06:40Z

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 🥀

iker-barriocanal · 2021-12-10T14:30:52Z

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!

rodilo · 2021-12-10T14:59:40Z

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 👍

iker-barriocanal · 2021-12-13T13:12:34Z

Glad to see the patch worked! I'm closing the issue, if someone runs into this problem, post an update and I'll reopen it. Thanks!

In #3978, code was introduced to prevent node tracing integrations (mongo, postgres, etc) from appearing in the browser bundle where they don't belong. However, as part of our larger push to make our code more treeshakable, we recently changed how we export those integrations[1], making the previous workaround unnecessary. As a bonus, this should fix a rendering issue some users were having when using the `fallback` flag. Tested locally and on vercel. Fixes #4090. [1] #4204

getsantry bot added the Status: Untriaged label Oct 26, 2021

hoodwink73 mentioned this issue Oct 27, 2021

App crashing after updating to Next 12 and deploying on Vercel vercel/next.js#30400

Closed

ThangHuuVu mentioned this issue Oct 27, 2021

Temporarily disable sentry ThangHuuVu/thvu-blog#79

Merged

tifa2UP mentioned this issue Oct 28, 2021

Temporarily disable sentry quran/quran.com-frontend-next#627

Merged

kurniawanw0194 mentioned this issue Oct 29, 2021

feat(nextjs): Support Next.js v12 #4093

Merged

2 tasks

crubier mentioned this issue Oct 29, 2021

Enhancement/next 12 labelflow/labelflow#546

Merged

kevva mentioned this issue Nov 1, 2021

Cannot find module 'redux' (Deploy on Vercel w/ yarn workspace) vercel/next.js#30561

Closed

smeubank added the Package: nextjs Issues related to the Sentry Nextjs SDK label Nov 3, 2021

getsantry bot removed the Status: Untriaged label Nov 3, 2021

KATT mentioned this issue Nov 3, 2021

Upgrading from NextJS 11 to 12 build fails with Sentry. vercel/next.js#30872

Closed

adrianthedev mentioned this issue Nov 9, 2021

chore: try next 12 basetool-io/basetool#213

Closed

12 tasks

smeubank added this to the Next.js 12 Support milestone Nov 18, 2021

github-actions bot added the Status: Stale label Dec 9, 2021

lobsterkatie added Status: Backlog and removed Status: Stale labels Dec 9, 2021

lobsterkatie added the Type: Bug label Dec 9, 2021

iker-barriocanal closed this as completed Dec 13, 2021

lobsterkatie added Status: In Progress and removed Status: Backlog labels Dec 14, 2021

lobsterkatie mentioned this issue Dec 14, 2021

ref(nextjs): Remove resolve.alias treeshaking hack #4276

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error to render page on NextJs 12 with fallback = true #4090

Error to render page on NextJs 12 with fallback = true #4090

Leocardoso94 commented Oct 26, 2021 •

edited

Loading

dwest-teo commented Oct 26, 2021 •

edited

Loading

nicholasgriffintn commented Oct 26, 2021

rodilo commented Oct 26, 2021

ThePaulMcBride commented Oct 26, 2021

adikari commented Oct 28, 2021

lobsterkatie commented Oct 29, 2021 •

edited

Loading

kevva commented Oct 29, 2021

Leocardoso94 commented Oct 29, 2021

mataspetrikas commented Nov 3, 2021

shivashp commented Nov 4, 2021

adikari commented Nov 16, 2021

neverether commented Nov 16, 2021

DavidChouinard commented Nov 16, 2021

Leocardoso94 commented Nov 17, 2021

github-actions bot commented Dec 9, 2021

iker-barriocanal commented Dec 10, 2021

rodilo commented Dec 10, 2021

iker-barriocanal commented Dec 13, 2021

Error to render page on NextJs 12 with fallback = true #4090

Error to render page on NextJs 12 with fallback = true #4090

Comments

Leocardoso94 commented Oct 26, 2021 • edited Loading

Package + Version

Version:

Description

dwest-teo commented Oct 26, 2021 • edited Loading

nicholasgriffintn commented Oct 26, 2021

rodilo commented Oct 26, 2021

ThePaulMcBride commented Oct 26, 2021

adikari commented Oct 28, 2021

lobsterkatie commented Oct 29, 2021 • edited Loading

kevva commented Oct 29, 2021

Leocardoso94 commented Oct 29, 2021

mataspetrikas commented Nov 3, 2021

shivashp commented Nov 4, 2021

adikari commented Nov 16, 2021

neverether commented Nov 16, 2021

DavidChouinard commented Nov 16, 2021

Leocardoso94 commented Nov 17, 2021

github-actions bot commented Dec 9, 2021

iker-barriocanal commented Dec 10, 2021

rodilo commented Dec 10, 2021

iker-barriocanal commented Dec 13, 2021

Leocardoso94 commented Oct 26, 2021 •

edited

Loading

dwest-teo commented Oct 26, 2021 •

edited

Loading

lobsterkatie commented Oct 29, 2021 •

edited

Loading