Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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 #8541

Closed
3 tasks done
philwolstenholme opened this issue Jul 14, 2023 · 47 comments · Fixed by #8557
Assignees
Labels
Package: nextjs Issues related to the Sentry Nextjs SDK Type: Bug

Comments

@philwolstenholme
Copy link

philwolstenholme commented Jul 14, 2023

Is there an existing issue for this?

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
}

@philwolstenholme philwolstenholme changed the title Cannot destructure property 'RawSource' of 'require(...)' as it is undefined error only when withSentryConfig is used 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 Jul 14, 2023
@AbhiPrasad
Copy link
Member

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
Copy link

grabbou commented Jul 14, 2023

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
Copy link
Member

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

@krychaxp
Copy link

i have the same problem, it happens in 13.4.10 v

@jjrise
Copy link

jjrise commented Jul 15, 2023

I'm having the same problem with next 13.4.7

@jkhaui
Copy link

jkhaui commented Jul 15, 2023

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?

I've been experiencing this issue since bumping my libs from Next 13.4.9 to 13.4.10 & sentry/nextjs 7.47.0 to 7.58.1.

I just tried downgrading Next back to 13.4.9 and the issue is still occurring.

edit: oops, ignore my previous message. I'd forgotten to remove the caret in "next": "^13.4.9", so my project was still installing 13.4.10 🤦.

The issue is gone after pinning versions and using Sentry 7.58.1 with Next 13.4.9, so something in Next 13.4.10 is breaking Sentry

@godfrednanaowusu
Copy link

godfrednanaowusu commented Jul 15, 2023

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?

I've been experiencing this issue since bumping my libs from Next 13.4.9 to 13.4.10 & sentry/nextjs 7.47.0 to 7.58.1.

I just tried downgrading Next back to 13.4.9 and the issue is still occurring.

edit: oops, ignore my previous message. I'd forgotten to remove the caret in "next": "^13.4.9", so my project was still installing 13.4.10 facepalm.

The issue is gone after pinning versions and using Sentry 7.58.1 with Next 13.4.9, so something in Next 13.4.10 is breaking Sentry

this throws the error:

Error: Cannot find module 'webpack'

by the way, all these is after production has been built and started

@jjrise
Copy link

jjrise commented Jul 15, 2023

I can also confirm downgrading Next 13.4.10 to 13.4.9 solved this issue for me... I'm on Sentry 7.58.1

@jinsley8
Copy link

jinsley8 commented Jul 15, 2023

I had the same issue and downgraded Next.js to 13.4.9 for now

@thai-recurmetrics
Copy link

can confirm

@georgebastion
Copy link

Hello
The issue also happens on If you have sentry 7.58.0.

If you upgrade to sentry 7.58.1 and Next.js 13.4.9, the error issue disappears

@Lms24
Copy link
Member

Lms24 commented Jul 17, 2023

Hi all, quick update: We still believe the issue is not related to a specific, recent, Sentry SDK version but just to the latest Next 13.4.10 version. Going back to 13.4.9 fixes this issue regardless of the Sentry SDK version.

We have a somewhat ugly hotfix (#8543) to work around this but I'm not too happy with it, given that we don't know the root cause. That being said, if anyone has an idea what specific change in NextJS might cause the import of webpack-sources to suddenly fail during dev mode, please let us know :)

@shehi
Copy link

shehi commented Jul 17, 2023 via email

@Lms24
Copy link
Member

Lms24 commented Jul 17, 2023

Does that mean Next prod doesn't have this issue?

You mean npm run build? No this seems to work fine.

Just noticed that this issue was also raised in the NextJS repo:
vercel/next.js#52620

Lms24 added a commit that referenced this issue Jul 17, 2023
As reported in #8541, our NextJS SDK currently breaks dev mode for the
newest NextJS 13.4.10 version

I have absolutely no idea which of the changes in
[13.4.10](https://github.com/vercel/next.js/releases/tag/v13.4.10) is
causing this.
However, I traced the error back and it happens as soon as our NextJS
SDK package requires @sentry/webpack-plugin:

* @sentry/nextjs calls `require('@sentry/webpack-plugin')`
* @sentry/webpack-plugin calls `const { RawSource } =
require('webpack-sources');`
* For _whatever_ reason, NextJS can't require `webpack-sources` and
throws 💥

Since we don't enable our Webpack plugin [in dev
mode](https://github.com/getsentry/sentry-javascript/blob/723f851f358b75cd39da353804c51ff27ebb0c11/packages/nextjs/src/config/webpack.ts#L305)
anyway, one way to get rid of this error is to only require it if we're
_not_ in dev mode.

This hotfix therefore moves the top-level require of
`@sentry/webpack-plugin` to a dynamic require. This isn't a great
solution and honestly quite ugly but if it unblocks users for now I'd
say we merge it. I think we should definitely revisit this though once
we know more about why NextJS suddenly isn't able to import
`webpack-sources`.

ref #8541
@godfrednanaowusu
Copy link

I'm having the same problem with next 13.4.7

with this nextjs version, i have noticed the sentry version that works with it is

@sentry/nextjs =7.57.0

@Lms24
Copy link
Member

Lms24 commented Jul 17, 2023

To everyone following this thread: We just released a beta version with the aforementioned hotfix.

If you can, please help us out and update to @sentry/[email protected] and [email protected]. Please let us know if this fixes things for you again. Thanks!

@kirkegaard
Copy link

kirkegaard commented Jul 21, 2023

It might just be an issue with emoji-mart. Even with 7.60.0 and next 13.4.11 im seeing this error when loading emoji-mart. But ONLY in production builds. Works just fine when in dev mode.

Screenshot 2023-07-21 at 13 41 44

The error doesnt point me to anything useful and might not even be connected to this issue. But it started happening after the update.

https://codesandbox.io/p/sandbox/elated-lake-m6hgwd

EDIT: Im sorry, the more i look at it it seems like its not a sentry thing. Ill take it up with next or emoji-mart :)

@Lms24
Copy link
Member

Lms24 commented Jul 21, 2023

Well, seems at least we're not the only ones that who were once again broken by next 😅 thanks for investigating @kirkegaard!

Looks like it is fixed in @sentry/nextjs 7.59.3 #8584

Yes, that's correct 🤞

@wmadden
Copy link

wmadden commented Jul 24, 2023

I get the same issue as @0x80 on @sentry/next.js 7.59.3:

TypeError: SentryWebpackPlugin.cliBinaryExists is not a function
at shouldEnableWebpackPlugin

@jandolezal71
Copy link

Comment from nextjs team: vercel/next.js#52620 (comment)

@wmadden
Copy link

wmadden commented Jul 31, 2023

Any progress here?

@lforst
Copy link
Member

lforst commented Aug 1, 2023

@wmadden @0x80 What is your current issue?

  • Can you share more information about your setup?
  • What package manager are you using?
  • Are you in a monorepo?
  • Can you try and delete your package manager cache and reinstalling dependencies?

Thanks!

@lforst
Copy link
Member

lforst commented Aug 1, 2023

@wmadden @0x80 I have a theory that the two webpack plugin versions you have installed are clashing. Do you know why you have 2.4.0 installed? For nextjs you should be on 1.20.0 not 2.4.0.

@jandolezal71
Copy link

jandolezal71 commented Aug 1, 2023

@wmadden @0x80 I have a theory that the two webpack plugin versions you have installed are clashing. Do you know why you have 2.4.0 installed? For nextjs you should be on 1.20.0 not 2.4.0.

Anyway, IMHO this issue is not related to the original bug report Cannot destructure property 'RawSource' of 'require(...)' as it is undefined error.

Shouldn't be error from #wmadden discussed in another thread and close this issue?

@emmgfx
Copy link

emmgfx commented Aug 1, 2023

Yes @jandolezal71 , the original issue was solved in @sentry/[email protected]

@wmadden
Copy link

wmadden commented Aug 4, 2023

@jandolezal71 You were right, we have a package in our monorepo with a dependency on @sentry/[email protected]. Updating this to 1.20.0 fixed the issue.

Thanks for your help!

@lforst
Copy link
Member

lforst commented Aug 4, 2023

@jandolezal71 You were right, we have a package in our monorepo with a dependency on @sentry/[email protected]. Updating this to 1.20.0 fixed the issue.

Thanks for your help!

Great. Thanks for the update!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Package: nextjs Issues related to the Sentry Nextjs SDK Type: Bug
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.