@sentry/nextjs 6.7.1+ withSentryConfig static site generation fails if Next publicRuntimeConfig is called

[neilpoulin]

• 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
• Provide a link to the affected event from your Sentry account

Package + Version

• @sentry/browser
• @sentry/node
• raven-js
• raven-node (raven for node)
• other: @sentry/nextjs

Version:

# @sentry/nextjs
6.8.0 and 6.7.2 (works in 6.7.1)

# next
11.0.1

Description

Running next build fails on all statically generated pages that depend on Next's publicRuntimeConfig as it is undefined.

Everything works great on @sentry/nextjs version 6.7.1 but static site builds break on both 6.7.2 and 6.8.0.

If i exclude the withSentryConfig plugin from my next.config.js file, the app builds successfully.

Note: JIT logs come from tailwind css, using version 2.2.4.

Build logs

/Users/neilpoulin/.nvm/versions/node/v12.18.4/bin/node /Users/neilpoulin/.nvm/versions/node/v12.18.4/lib/node_modules/npm/bin/npm-cli.js run build:dry --scripts-prepend-node-path=auto

> my-sentry-project@0.1.0 build:dry /Users/repos/my-sentry-project
> NODE_ENV=production SENTRY_DRY_RUN=true next build

info  - Loaded env from /Users/repos/my-sentry-project/.env.local
info  - Loaded env from /Users/repos/my-sentry-project/.env
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types  

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
[=== ] info  - Generating static pages (0/11)
Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot destructure property 'accessTokenExpirationRefreshBufferMs' of 'publicRuntimeConfig' as it is undefined.
    at getConfig (/Users/repos/my-sentry-project/.next/server/chunks/4863.js:138:5)
    at Object.1329 (/Users/repos/my-sentry-project/.next/server/chunks/9134.js:4082:48)
    at __webpack_require__ (/Users/repos/my-sentry-project/.next/server/webpack-runtime.js:25:42)
    at Object.9569 (/Users/repos/my-sentry-project/.next/server/chunks/9134.js:3789:12)
    at __webpack_require__ (/Users/repos/my-sentry-project/.next/server/webpack-runtime.js:25:42)
    at Object.349 (/Users/repos/my-sentry-project/.next/server/pages/_app.js:175:13)
    at __webpack_require__ (/Users/repos/my-sentry-project/.next/server/webpack-runtime.js:25:42)
    at __webpack_exec__ (/Users/repos/my-sentry-project/.next/server/pages/_app.js:834:52)
    at /Users/repos/my-sentry-project/.next/server/pages/_app.js:835:90
    at Function.__webpack_require__.X (/Users/repos/my-sentry-project/.next/server/webpack-runtime.js:108:21)
[==  ] info  - Generating static pages (0/11)
Error occurred prerendering page "/privacy-policy". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot destructure property 'accessTokenExpirationRefreshBufferMs' of 'publicRuntimeConfig' as it is undefined.
    at getConfig (/Users/repos/my-sentry-project/.next/server/chunks/4863.js:138:5)
    at Object.1329 (/Users/repos/my-sentry-project/.next/server/chunks/9134.js:4082:48)
    at __webpack_require__ (/Users/repos/my-sentry-project/.next/server/webpack-runtime.js:25:42)
    at Object.9569 (/Users/repos/my-sentry-project/.next/server/chunks/9134.js:3789:12)
    at __webpack_require__ (/Users/repos/my-sentry-project/.next/server/webpack-runtime.js:25:42)
    at Object.349 (/Users/repos/my-sentry-project/.next/server/pages/_app.js:175:13)
    at __webpack_require__ (/Users/repos/my-sentry-project/.next/server/webpack-runtime.js:25:42)
    at __webpack_exec__ (/Users/repos/my-sentry-project/.next/server/pages/_app.js:834:52)
    at /Users/repos/my-sentry-project/.next/server/pages/_app.js:835:90
    at Function.__webpack_require__.X (/Users/repos/my-sentry-project/.next/server/webpack-runtime.js:108:21)



#### .... etc, for all static pages on the site

Next.js config file

/* eslint-disable @typescript-eslint/no-var-requires */
const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',
});
const { withSentryConfig } = require('@sentry/nextjs');

const isProd = process.env.NODE_ENV === 'production';
const isDryRun = process.env.SENTRY_DRY_RUN === 'true';

// Note: the Sentry Deploy is now triggered in circleci
const SentryWebpackPluginOptions = {
    dryRun: !isProd || isDryRun,
    debug: true,
    authToken: process.env.SENTRY_AUTH_TOKEN,
    setCommits: {
        commit: process.env.APP_VERSION,
        repo: process.env.SENTRY_REPO,
    },
};

/** @type {import('next/dist/next-server/server/config').NextConfig} **/
const nextConfig = {
    target: 'server',
    poweredByHeader: false,
    productionBrowserSourceMaps: true,
    publicRuntimeConfig: {
        apiHost: process.env.API_HOST,
        accessTokenExpirationRefreshBufferMs: process.env.ACCESS_TOKEN_EXPIRATION_REFRESH_BUFFER_MS,
        // ... etc
    },
};

const sentryConfig = isProd ? withSentryConfig(nextConfig, SentryWebpackPluginOptions) : nextConfig;

module.exports = withBundleAnalyzer(sentryConfig);

Related issues?

#3733

[lobsterkatie]

@neilpoulin - Thanks for reporting this. I'll take a look at it tomorrow.

In the meantime, can you please tell me what version of nextjs you're using? Also, I notice the warning in your logs about the JIT engine, but I don't see where that's getting set in your next.config.js. If you don't set that, do you still have the problem?

[neilpoulin]

Thanks for the reply!

I'm on Next version 11.0.1. The JIT message comes from tailwind@2.2.4. I can not remove the JIT engine for tailwind, as it is needed to produce my stylesheets. It's been working without issue last 2 months or so.

[lobsterkatie]

Got it, thanks.

I'm struggling to reproduce your issue. I have the following setup in my test app:

next.config.js

const { withSentryConfig } = require("@sentry/nextjs");
const withBundleAnalyzer = require("@next/bundle-analyzer")();

const moduleExports = {
  publicRuntimeConfig: { dogs: "yes", cats: "maybe" },
};

const SentryWebpackPluginOptions = {
  // ...
};

module.exports = withBundleAnalyzer(
  withSentryConfig(moduleExports, SentryWebpackPluginOptions)
);

pages/simple.js

import getConfig from "next/config";

const { publicRuntimeConfig } = getConfig();

console.log("\n\nin pages/simple.js");
console.log("runtime config");
console.log(publicRuntimeConfig, "\n");

export default function SimplePage() {
  return <div>This is a very simple page.</div>;
}

And I get the following when I build:

~/Documents/Sentry/test-apps/next-js-test 🐿 > yarn build
yarn run v1.22.10
$ next build
info  - Loaded env from /Users/Katie/Documents/Sentry/test-apps/next-js-test/.env.local
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types  
warn  - No ESLint configuration detected. Run next lint to begin setup
Webpack Bundle Analyzer saved report to /Users/Katie/Documents/Sentry/test-apps/next-js-test/.next/analyze/client.html
Webpack Bundle Analyzer saved report to /Users/Katie/Documents/Sentry/test-apps/next-js-test/.next/server/analyze/server.html
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data ..

in pages/simple.js
runtime config
{ dogs: 'yes', cats: 'maybe' } 

info  - Collecting page data  
[=== ] info  - Generating static pages (0/4)

in pages/simple.js
runtime config
{ dogs: 'yes', cats: 'maybe' } 

info  - Generating static pages (4/4)
info  - Finalizing page optimization  

Page                                Size     First Load JS
┌ ● / (ISR: 1 Seconds)              5.84 kB         104 kB
├   └ css/03d8395de04963cab668.css  705 B
├ ○ /404                            3.23 kB         101 kB
└ ○ /simple                         414 B          98.5 kB
+ First Load JS shared by all       98.1 kB
  ├ chunks/framework.7836ed.js      42.1 kB
  ├ chunks/main.cff0e6.js           54.2 kB
  ├ chunks/pages/_app.70e80c.js     855 B
  └ chunks/webpack.c5154a.js        997 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)

✨  Done in 5.25s.

We also have a test which covers this exact question.

Can you please provide a minimal repro if you're still having trouble?

[iker-barriocanal]

It's been a while since there was no response. If it still happens using the latest version, reopen the issue and provide a minimal repro case.

Thanks!