TypeError: Breadcrumbs is not a constructor

[iserialize]

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/vue

SDK Version

7.85.0

Framework Version

7.85.0

Link to Sentry event

No response

SDK Setup

import { boot } from 'quasar/wrappers'
import * as Sentry from "@sentry/vue";

// "async" is optional;
// more info on params: https://v2.quasar.dev/quasar-cli/boot-files
export default boot(async ({ app, router }) => {
  // something to do
  Sentry.init({
    app,
    dsn: "https://a36dd9dfc8ac83bc36b76d41a2823fad@o1323164.ingest.sentry.io/4505803071422464",
    integrations: [
      new Sentry.BrowserTracing({
        routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      }),
      new Sentry.Replay(),
    ],

    // Set tracesSampleRate to 1.0 to capture 100%
    // of transactions for performance monitoring.
    // We recommend adjusting this value in production
    tracesSampleRate: 1.0,

    // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
    tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],

    // Capture Replay for 10% of all sessions,
    // plus for 100% of sessions with an error
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1.0,
  });
})

Steps to Reproduce

1. Add a new boot file in the quasar framework
2. Add the above code in the boot file
3. View the site and see the error in the console.log.

Expected Result

No errors

Actual Result

[Quasar] boot error: TypeError: Breadcrumbs is not a constructor. message in the console log

[iserialize]

Strange, but deleted all package and reinstalled and problem went away

[lforst]

Great! Thanks for following up!

[vinassefranche]

Hi! I also have the issue on my side and it does not self resolves when re-installing the packages.

I've managed to reproduce the issue in this repository: https://github.com/vinassefranche/sentry-esm-issue/tree/main

There seems to be an issue with the esm build. If I change the import from import * as Sentry from '@sentry/browser'; to import * as Sentry from '@sentry/browser/cjs'; the problem goes away.

[lforst]

@vinassefranche If you set mainfields to "module" this happening is kinda expected. The main field points to cjs and the module field to esm. If you try to use esm as cjs you're gonna run into issues.

[vinassefranche]

Thanks for the answer!
I'm not using esm as cjs. I'm using vitest which consumes esm properly. vitest knows how to handle cjs too, that's why I checked what was happening with the cjs import but using "module" is supposed to work properly.
We use "module" in our code base as our internal packages export esm file and everything works well.

And FYI, this issue is happening only with the recent versions. With version 7.81.1, I don't have any issue with this vitest configuration.

[lforst]

@vinassefranche You are absolutely right. Please excuse my ignorance. We've identified the issue here we believe: #9775

[vinassefranche]

No problem! It's easy to get confused with all this kind of things.
Thanks for checking and it might indeed be fixed from the P.R. you linked. I'll be able to confirm when this is merged and released!