Webpack config for sentry nextjs plugin not documented

[pdugan20]

• [x] Review the documentation: https://docs.sentry.io/
• [x] Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• [x] Use the latest release: https://github.com/getsentry/sentry-javascript/releases
• [x] Provide a link to the affected event from your Sentry account

Package + Version

• [ ] @sentry/browser
• [ ] @sentry/node
• [x] @sentry/nextjs

Version:

6.72

Description

Using the default webpack configuration for the @sentry/nextjs plugin as outlined in the with-sentry nextjs example, I receive the following error when trying to run my app in development:

error - ./node_modules/@sentry/node/esm/integrations/modules.js:2:0
Module not found: Can't resolve 'fs'
null

If I include the following lines in my webpack config like I was using in my previous sentry configuration setup...

    webpack: (config, options) => {
        if (!options.isServer) {
            config.resolve.alias['@sentry/node'] = '@sentry/browser';
        }
        return config;
    },

...everything works completely fine. Is this expected? Should this be included in the with-sentry nextjs example?

[pdugan20]

This is also using next ^11.0.1.

[onurtemizkan]

Thanks for reporting @pdugan20. I could not reproduce the issue using @sentry/nextjs: 6.7.2 and next: 11.0.1. The live example is also working fine. Could you create a reproducible example for us to check?

[lobsterkatie]

Also, @pdugan20, a number of changes to our webpack config have shipped in the last few releases. Can you please try updating to 6.9.0 and let us know if you're still having trouble?

[francescov1]

Im still running into this with 6.10.0

[pdugan20]

I'm also still seeing this on 6.10.0 with next 11.0.1. I'll see if I can break it out into a standalone code sample, but FWIW my next.config.js looks like:

const { withSentryConfig } = require('@sentry/nextjs');
const { i18n } = require('./next-i18next.config');

const moduleExports = {
    async headers() {
        return [
            {
                source: '/images/:path*',
                headers: [
                    {
                        key: 'Cache-Control',
                        value: 'public, max-age=31536000, stale-while-revalidate',
                    },
                ],
            },
        ];
    },
    images: {
        domains: [
            'res.cloudinary.com',
            'firebasestorage.googleapis.com',
            'googleapis.com',
        ],
        loader: 'cloudinary',
        path: 'https://res.cloudinary.com/hikearound/',
    },
    webpack: (config, options) => {
        if (!options.isServer) {
            config.resolve.alias['@sentry/node'] = '@sentry/browser';
        }
        return config;
    },
    i18n,
};

const sentryWebpackPluginOptions = {};

module.exports = withSentryConfig(moduleExports, sentryWebpackPluginOptions);

[lobsterkatie]

Ah - @pdugan20, I think I see the problem. Please remove

    webpack: (config, options) => {
        if (!options.isServer) {
            config.resolve.alias['@sentry/node'] = '@sentry/browser';
        }
        return config;
    },

as this was only necessary when running an @sentry/browser/@sentry/node combo. @sentry/nexjs handles this for you.

(Also make sure that you no longer have any direct references in your code to either of the component SDKs, just to @sentry/nextjs.)

[pdugan20]

Oh gosh, was crawling through my sentry references and saw I was still referring to @sentry/node in a single place, which is what I'm guessing was throwing the error! Let me try nuking that out to see if that resolves the issue.

[pdugan20]

That fixed it! Thanks for pointing me in the right direction and fine to close out 😄

[francescov1]

Ah same with me, had an old test that was still referencing @sentry/node. Sorry about that!