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