Cannot destructure property 'RawSource' of 'require(...)' as it is undefined error only when withSentryConfig is used and a site is viewed in Next dev mode

[philwolstenholme]

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 SDK are you using?

@sentry/nextjs

SDK Version

7.58.1

Framework Version

13.4.10

Link to Sentry event

No response

SDK Setup

next.config.js:

const cspHeaders = require('./src/utils/csp.js');

const { env: clientEnv } = require('./src/utils/public/configuration.js');

const { withSentryConfig } = require('@sentry/nextjs');
const nextBuildId = require('next-build-id');

const bundleAnalyzer = require('@next/bundle-analyzer')({
  // eslint-disable-next-line n/no-process-env
  enabled: !!process.env.BUNDLE_ANALYSE
});

//This import allows for build time checking of the public environment variables
clientEnv;

const securityHeaders = [
  {
    key: 'X-DNS-Prefetch-Control',
    value: 'on'
  },
  {
    key: 'Strict-Transport-Security',
    value: 'max-age=63072000; includeSubDomains; preload'
  },
  {
    key: 'X-XSS-Protection',
    value: '1; mode=block'
  },
  {
    key: 'X-Frame-Options',
    value: 'SAMEORIGIN'
  },
  {
    key: 'X-Content-Type-Options',
    value: 'nosniff'
  },
  {
    key: 'Referrer-Policy',
    value: 'no-referrer-when-downgrade'
  }
];

const allPathsHeaders = [
  {
    key: 'X-Robots-Tag',
    value: 'noindex'
  },
  {
    key: 'Content-Security-Policy',
    value: cspHeaders
  }
];

/** @type {import('next').NextConfig} */
const nextConfig = {
  // We want prod sourcemaps for Rollbar/Sentry etc.
  productionBrowserSourceMaps: true,
  // Imperva's CDN will give us Brotli or Gzip compression, so this can take the load off the Next server:
  // @TODO: set this back to false when https://github.com/vercel/next.js/issues/48713 resolved
  compress: true,
  experimental: {
    // Disabled for now as experimental and https://github.com/vercel/next.js/issues/51286
    serverActions: false
  },
  images: {
    // Set a minimum cache TTL for images as the Azure blob storage product
    // image responses do not include a cache-control header
    minimumCacheTTL: 86400,
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.ctfassets.net'
      },
      {
        protocol: 'https',
        hostname: 'rt-1-pr-euw-retailapis-end-01.azureedge.net'
      },
      {
        protocol: 'https',
        hostname: 'rt-1-dv-euw-retailapis-end-01.azureedge.net'
      },
      {
        protocol: 'https',
        hostname: 'sspayinaisledevsst02.blob.core.windows.net'
      }
    ]
  },
  headers: async () => {
    const headers = [
      {
        source: '/:path*',
        headers: [...allPathsHeaders, ...securityHeaders]
      }
    ];

    return headers;
  },
  modularizeImports: {
    lodash: {
      transform: 'lodash/{{member}}'
    }
  },
  // https://github.com/nexdrew/next-build-id
  // Base Next's build ID on Git info rather than a random string
  generateBuildId: () => nextBuildId({ dir: __dirname, describe: true }),
  webpack: (config, { webpack, buildId }) => {
    config.plugins.push(
      new webpack.DefinePlugin({
        // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking/
        __SENTRY_DEBUG__: false
        // __SENTRY_TRACING__: false
      }),
      new webpack.DefinePlugin({
        'process.env.NEXT_PUBLIC_BUILD_ID': JSON.stringify(buildId),
        // eslint-disable-next-line n/no-process-env
        'process.env.NEXT_PUBLIC_NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      })
    );

    return config;
  },
  // Remove the x-powered-by header as some pentesters/scanners consider it an
  // information disclosure.
  poweredByHeader: false,
  eslint: {
    ignoreDuringBuilds: true
  },
  transpilePackages: [
    '@sindresorhus/slugify',
    'escape-string-regexp',
    '@sindresorhus/transliterate'
  ],
  sentry: {
    hideSourcemaps: false
  }
};

module.exports = withSentryConfig(bundleAnalyzer(nextConfig), {
  silent: true
});

// module.exports = bundleAnalyzer(nextConfig);

Steps to Reproduce

I'm sorry, I don't have a minimum viable reproduction for this, and it's a private repo. I can try and put something together next week perhaps, but I wanted to raise this issue in case one of the maintainers recognised the issue.

My environment:

❯ npx next info

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:20 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.14.0
      npm: 9.6.4
      Yarn: N/A
      pnpm: 7.29.0
    Relevant Packages:
      next: 13.4.10
      eslint-config-next: 13.4.10
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

Expected Result

Site can be viewed in dev mode

Actual Result

Site errors when a page is viewed in dev mode when withSentryConfig is used, but works when withSentryConfig is not used.

- error TypeError: Cannot destructure property 'RawSource' of 'require(...)' as it is undefined.
    at @sentry/nextjs (/Users/wolsph/Projects/shop-next/.next/server/app/(main)/page.js:22:18)
    at __webpack_require__ (/Users/wolsph/Projects/shop-next/.next/server/webpack-runtime.js:33:43)
    at eval (./sentry.server.config.js:2:72)
    at (sc_server)/./sentry.server.config.js (/Users/wolsph/Projects/shop-next/.next/server/app/(main)/page.js:4643:1)
    at __webpack_require__ (/Users/wolsph/Projects/shop-next/.next/server/webpack-runtime.js:33:43)
    at eval (./src/app/layout.tsx:6:82)
    at (sc_server)/./src/app/layout.tsx (/Users/wolsph/Projects/shop-next/.next/server/app/(main)/page.js:1548:1)
    at Function.__webpack_require__ (/Users/wolsph/Projects/shop-next/.next/server/webpack-runtime.js:33:43)
- error TypeError: Cannot destructure property 'RawSource' of 'require(...)' as it is undefined.
    at @sentry/nextjs (/Users/wolsph/Projects/shop-next/.next/server/app/(main)/page.js:22:18)
    at __webpack_require__ (/Users/wolsph/Projects/shop-next/.next/server/webpack-runtime.js:33:43)
    at eval (./sentry.server.config.js:2:72)
    at (sc_server)/./sentry.server.config.js (/Users/wolsph/Projects/shop-next/.next/server/app/(main)/page.js:4643:1)
    at __webpack_require__ (/Users/wolsph/Projects/shop-next/.next/server/webpack-runtime.js:33:43)
    at eval (./src/app/layout.tsx:6:82)
    at (sc_server)/./src/app/layout.tsx (/Users/wolsph/Projects/shop-next/.next/server/app/(main)/page.js:1548:1)
    at Function.__webpack_require__ (/Users/wolsph/Projects/shop-next/.next/server/webpack-runtime.js:33:43)
digest: "1055278946"
- error Error [TypeError]: Cannot destructure property 'RawSource' of 'require(...)' as it is undefined.
    at Object.<anonymous> (/Users/wolsph/Projects/shop-next/node_modules/@sentry/webpack-plugin/src/index.js:5:9)
    at Module._compile (node:internal/modules/cjs/loader:1226:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1280:10)
    at Module.load (node:internal/modules/cjs/loader:1089:32)
    at Module._load (node:internal/modules/cjs/loader:930:12)
    at Module.require (node:internal/modules/cjs/loader:1113:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/Users/wolsph/Projects/shop-next/node_modules/@sentry/webpack-plugin/src/cjs.js:1:18)
    at Module._compile (node:internal/modules/cjs/loader:1226:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1280:10)
    at Module.load (node:internal/modules/cjs/loader:1089:32)
    at Module._load (node:internal/modules/cjs/loader:930:12)
    at Module.require (node:internal/modules/cjs/loader:1113:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/Users/wolsph/Projects/shop-next/node_modules/@sentry/nextjs/cjs/config/webpack.js:10:29)
    at Module._compile (node:internal/modules/cjs/loader:1226:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1280:10)
    at Module.load (node:internal/modules/cjs/loader:1089:32)
    at Module._load (node:internal/modules/cjs/loader:930:12)
    at Module.require (node:internal/modules/cjs/loader:1113:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/Users/wolsph/Projects/shop-next/node_modules/@sentry/nextjs/cjs/config/withSentryConfig.js:7:17)
    at Module._compile (node:internal/modules/cjs/loader:1226:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1280:10)
    at Module.load (node:internal/modules/cjs/loader:1089:32)
    at Module._load (node:internal/modules/cjs/loader:930:12)
    at Module.require (node:internal/modules/cjs/loader:1113:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/Users/wolsph/Projects/shop-next/node_modules/@sentry/nextjs/cjs/index.server.js:4:26)
    at Module._compile (node:internal/modules/cjs/loader:1226:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1280:10)
    at Module.load (node:internal/modules/cjs/loader:1089:32)
    at Module._load (node:internal/modules/cjs/loader:930:12)
    at Module.require (node:internal/modules/cjs/loader:1113:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at @sentry/nextjs (/Users/wolsph/Projects/shop-next/.next/server/app/(main)/page.js:22:18)
    at __webpack_require__ (/Users/wolsph/Projects/shop-next/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_server)/./sentry.server.config.js:2:72)
    at (sc_server)/./sentry.server.config.js (/Users/wolsph/Projects/shop-next/.next/server/app/(main)/page.js:4643:1)
    at __webpack_require__ (/Users/wolsph/Projects/shop-next/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_server)/./src/app/layout.tsx:6:82)
    at (sc_server)/./src/app/layout.tsx (/Users/wolsph/Projects/shop-next/.next/server/app/(main)/page.js:1548:1)
    at Function.__webpack_require__ (/Users/wolsph/Projects/shop-next/.next/server/webpack-runtime.js:33:43)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async /Users/wolsph/Projects/shop-next/node_modules/next/dist/server/app-render/app-render.js:1016:91 {
  digest: undefined
}

[AbhiPrasad]

Hey @philwolstenholme, thanks for writing in. I think our SDK has some issues with Next 13.4.10, we identified this in #8507 as well as got a report in https://twitter.com/ThisIsSingleton/status/1679879733444755457.

If you downgrade your Next version, do you still get errors?

[grabbou]

Does not happen after downgrading, this is only happening on 13.4.10 (somewhere after 13.4.10-canary.2 that I tested with before)

[AbhiPrasad]

We're still investigating what the issue here is - but if anyone has any ideas/suggestions they're greatly appreciated!

[krychaxp]

i have the same problem, it happens in 13.4.10 v

[jjrise]

I'm having the same problem with next 13.4.7