@sentry/nextjs: can't read data inside next-compose-plugins

[Fadhilamadan]

• 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.4.1",
"next": "^10.2.1",

Description

FYI: We start projects with version < 10.0.0 and then we are upgrading to the latest version.

Previously we have a setting in our next.config.js like this.

const withCss = require("@zeit/next-css");
const withSass = require("@zeit/next-sass");
const withPlugins = require("next-compose-plugins");
const withImages = require("next-images");

module.exports = withPlugins([withCss, withSass, withImages], {
 env: {
 SENTRY_DSN: "xxx",
 }
});

Then we change the structure like in the documentation, become like this:

const { withSentryConfig } = require("@sentry/nextjs");

const withCss = require("@zeit/next-css");
const withSass = require("@zeit/next-sass");
const withPlugins = require("next-compose-plugins");
const withImages = require("next-images");

const moduleExports = withPlugins([withCss, withSass, withImages], {
 env: {
 SENTRY_DSN: "xxx",
 }
});

// other codes

module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions);

When we run the app, env can't read with a struct like that. (start from this we are confused)

But, when we are changing the structure like this:

const { withSentryConfig } = require("@sentry/nextjs");

const moduleExports = {
 env: {
 SENTRY_DSN: "xxx",
 }
};

// other codes

module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions);

The app can run fine, but the problem is we don't want to change like that because we are still using the next-compose-plugins.

Is there any recommendation for us, thank you.

[AbhiPrasad]

Hey, thanks for reaching out! You should be able to use withSentryConfig alongside withPlugins like this:

const withCss = require("@zeit/next-css");
const withSass = require("@zeit/next-sass");
const withPlugins = require("next-compose-plugins");
const withImages = require("next-images");

const SentryWebpackPluginOptions = {
 // Additional config options for the Sentry Webpack plugin. Keep in mind that
 // the following options are set automatically, and overriding them is not
 // recommended:
 // release, url, org, project, authToken, configFile, stripPrefix,
 // urlPrefix, include, ignore
 // For all available options, see:
 // https://github.com/getsentry/sentry-webpack-plugin#options.
}

// Add withSentryConfig as last plugin arg
module.exports = withPlugins([withCss, withSass, withImages, [withSentryConfig, SentryWebpackPluginOptions]], {
 env: {
 SENTRY_DSN: "xxx",
 }
});

It's important to note that withSentryConfig should be the last plugin passed into the plugin array as the plugins are applied in that order https://github.com/cyrilwanner/next-compose-plugins/blob/master/src/compose.js#L63

[AbhiPrasad]

Closing this issue as the above comment seems to solve the issue. Please re-open if you need anything else. Thanks!

[Fadhilamadan]

Hey, @AbhiPrasad thank you for your recommendation I appreciate it.

Your code is working for me and there is no problem with it and I want to share my code for references before I change to your code style.

const { withSentryConfig } = require("@sentry/nextjs");

const withCss = require("@zeit/next-css");
const withSass = require("@zeit/next-sass");
const withPlugins = require("next-compose-plugins");
const withImages = require("next-images");

const moduleExports = {
 env: {
 SENTRY_DSN: "xxx",
 }
};

const SentryWebpackPluginOptions = {
 // Additional config options for the Sentry Webpack plugin. Keep in mind that
 // the following options are set automatically, and overriding them is not
 // recommended:
 // release, url, org, project, authToken, configFile, stripPrefix,
 // urlPrefix, include, ignore
 // For all available options, see:
 // https://github.com/getsentry/sentry-webpack-plugin#options.
};

module.exports = withPlugins(
 [withCss, withSass, withImages],
 withSentryConfig(moduleExports, SentryWebpackPluginOptions)
);

When I use my code style I don't get any problem too.
But, I decided to use your code style because more readable for me.

Thank you.

[chris-erickson]

I'm using latest sentry and next.js and have a similar configuration. Would like to detail everything I've tried, they might all be valid options if I can figure out why these resolution errors are happening.

const withPlugins = require('next-compose-plugins');
const withImages = require('next-images');
const { withSentryConfig } = require('@sentry/nextjs');

const SentryWebpackPluginOptions = {
 silent: false,
};

const nextConfig = {
 reactStrictMode: true,
 future: {
 webpack5: true,
 },
 target: 'serverless',
 images: {
 domains: ['cdn.sanity.io'],
 },
 env: {
 SITE_URL: process.env.DEPLOY_PRIME_URL || process.env.SITE_URL,
 SANITY_PROJECT_ID: process.env.SANITY_PROJECT_ID,
 SANITY_DATASET: process.env.SANITY_DATASET,
 SANITY_READ_TOKEN: process.env.SANITY_READ_TOKEN || '',
 GIT_REF: process.env.COMMIT_REF,
 },
};

const nextPlugins = [[withImages, { esModule: true }]];
module.exports = withPlugins(
 nextPlugins,
 withSentryConfig(nextConfig, SentryWebpackPluginOptions)
);

or (from here)

const nextPlugins = [
 [withImages, { esModule: true }],
 (nextConfig) => withSentryConfig(nextConfig, SentryWebpackPluginOptions),
];

module.exports = withPlugins(nextPlugins, nextConfig);

or

const nextPlugins = [[withImages, { esModule: true }]];
module.exports = withPlugins(
 nextPlugins,
 withSentryConfig(nextConfig, SentryWebpackPluginOptions)
);

but am getting this error:

ModuleNotFoundError: Module not found: Error: Can't resolve '@zeit/next-less' in '/site/node_modules/next/dist/build'

or sometimes

ModuleNotFoundError: Module not found: Error: Can't resolve '@zeit/next-stylus' in '/site/node_modules/next/dist/build'

[AbhiPrasad]

Ah I think the issue here is with target: 'serverless' @chris-erickson , which we don't support as per: #3621

We recommend switching to the experimental-serverless-trace target, see: #3575 (comment).

[chris-erickson]

Exactly it. Thank you! (works with any of the variants I shared above)

🙈

[Sm1t]

@AbhiPrasad hi, it looks like SentryWebpackPluginOptions is being ignored when using withSentryConfig inside withPlugins. Reproduction:

• clone https://github.com/vercel/next.js/tree/canary/examples/with-sentry
• add the following next.config.js:

const { withSentryConfig } = require('@sentry/nextjs');
const withPlugins = require('next-compose-plugins');

const SentryWebpackPluginOptions = {
 release: 'qwe',
 dryRun: false,
};

module.exports = withPlugins(
 [[withSentryConfig, SentryWebpackPluginOptions]],
 {}
);

• yarn dev
• release still "development" (terminal: [Sentry Webpack Plugin] Finalizing release: 'development'), uploading source maps to Sentry was not called

When using withSentryConfig outside of plugins, as in the example above, SentryWebpackPluginOptions works as expected - release 'qwe', loading source maps into Sentry was called (terminal: 'Authentication credentials were not provided', as expected)

const { withSentryConfig } = require('@sentry/nextjs');
const withPlugins = require('next-compose-plugins');

const SentryWebpackPluginOptions = {
 release: 'qwe',
 dryRun: false,
};

module.exports = withPlugins(
 [],
 withSentryConfig({}, SentryWebpackPluginOptions)
);