Uncaught ReferenceError: require is not defined with Vue 3

[karanagarwal17]

• 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/integrations
• @sentry/tracing

Version:

5.28.0

Description

When doing one of the following:

import * as Sentry from '@sentry/browser'
import { Vue as VueIntegration } from '@sentry/integrations'
import { Integrations } from '@sentry/tracing'

I will get the following error in the browser:

Uncaught ReferenceError: require is not defined
    <anonymous> http://localhost:3000/@modules/@sentry/integrations.js:650

<anonymous> http://localhost:3000/@modules/@sentry/integrations.js:650
    InnerModuleEvaluation self-hosted:2346
    InnerModuleEvaluation self-hosted:2346
    evaluation self-hosted:2317

I believe this is due to using require on line 650 var localForage = require('localforage'); while the rest of the places are using import/export.

Is there something I am doing wrong?

[t-h-man]

Hi. After making sure that you have installed the latest Sentry Vue package as indicated here, use the code below as imports and SDK init and try again.

import Vue from "vue";
import * as Sentry from "@sentry/browser";
import { Integrations } from "@sentry/tracing";

Sentry.init({
  integrations: [
    new Integrations.BrowserTracing(),
  ],

  // We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0,
});