Next.js SDK incompatibility with bundle analyzer

[yhuang1211]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/nextjs

SDK Version

7.22.0

Framework Version

13.0.5

Link to Sentry event

No response

Steps to Reproduce

After upgrading @sentry/nextjs from 7.21.1 to 7.22.0, the environment variables in next.config.js get dropped and can no longer be accessed from next app.

// next.config.js
const { withSentryConfig } = require("@sentry/nextjs");
const withBundleAnalyzer = require("@next/bundle-analyzer")({ enabled: process.env.ANALYZE === "true" });

const moduleExports = { env: { myConfig: 'MY_CONFIG' }, ... }

const SentryWebpackPluginOptions = { silent: true };

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

The config code above worked fine before 7.22.0.
At 7.22.0 it would work if withBundleAnalyzer is removed though.

Expected Result

In next app console.log(process.env.myConfig) should print MY_CONFIG on browser.

Actual Result

console.log(process.env.myConfig) prints undefined

[lforst]

Are you sure this worked before? Normally to use env vars in the browser you need to prefix env vars with NEXT_PUBLIC_: https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser

[karanpvyas]

It seems after upgrade to 7.22.0 -> it is dropping project's next.config.js's variables.
We had certain ignoreBuildError(s) set to true, now they're coming as false in the config returned.

[lforst]

@karanpvyas could you elaborate a bit?

Since 7.22.0, withSentryConfig now always returns a function (nextjs docs on that). Maybe it has to do with that.

[yhuang1211]

According to https://nextjs.org/docs/api-reference/next.config.js/environment-variables
env variables could be exposed to browser by putting them in next.config.js.
The added env vars are not in node environment either after v7.22.0 is installed, and they were there at 7.21.1. (I just downgrade to test it.)

[yhuang1211]

I just did some more tests.

1. module.exports = withBundleAnalyzer(withSentryConfig(moduleExports, SentryWebpackPluginOptions)); => Not working
2. module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions); => Working
3. module.exports = withSentryConfig(withBundleAnalyzer(moduleExports), SentryWebpackPluginOptions); => Working

It looks like that the output of withSentryConfig cannot be handled by withBundleAnalyzer, but the other way around is ok. For now I just do 3. The catch is that if withBundleAnalyzer is wrapped inside withSentryConfig the result of the bundle analysis will exclude Sentry package.

[lforst]

Ok, I think I know what's happening. If you look at the bundle analyzer docs they state:

Or configuration as a function:

module.exports = (phase, defaultConfig) => {
 return withBundleAnalyzer(defaultConfig)
}

So what you should do is:

const nextConfig = {
  // your config
};
    
module.exports = (phase, defaults) => {
    const sentrifiedConfig = withSentryConfig(
      nextConfig,
      sentryWebpackPluginOptions
    )(phase, defaults);
    return withBundleAnalyzer(sentrifiedConfig);
}

This is more on bundle analyzer not being able to process function configs than on the Sentry SDK.

[lforst]

Another thing: We generally advise to wrap your config with withSentryConfig last.

[yhuang1211]

It's working now! Many thanks for the help. I'll close the issue and maybe open an improvement request on BundleAnalyzer then.