[nuxt] Error in pnpm nuxt dev mode: Cannot use import statement outside a module

[TrezorTop]

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

SDK Version

8.33.1

Framework Version

Nuxt 3.13.0

Link to Sentry event

No response

Reproduction Example/SDK Setup

Here is my configurations:

sentry.client.config.ts

import * as Sentry from "@sentry/nuxt";

Sentry.init({
  // If set up, you can use your runtime config here
  // dsn: useRuntimeConfig().public.sentry.dsn,
  dsn: "https://417a6acdaa42cf95c2271c2fa14541d9@o4504802128101376.ingest.us.sentry.io/4508092319727616",

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

sentry.server.config.ts

import * as Sentry from "@sentry/nuxt";

Sentry.init({
  dsn: "https://417a6acdaa42cf95c2271c2fa14541d9@o4504802128101376.ingest.us.sentry.io/4508092319727616",
});

Steps to Reproduce

1. Initialize a fresh Nuxt.js project.
2. Install the @sentry/nuxt package and add Sentry initialization (https://docs.sentry.io/platforms/javascript/guides/nuxt/).
3. Attempt to start the project locally.

Expected Result

Nuxt app on the localhost have been successfully launched.

Actual Result

Getting 500 response from the Nuxt server instance:

[nuxt] [request error] [unhandled] [500] Cannot use import statement outside a module
  at wrapSafe (node:internal/modules/cjs/loader:1469:18)
  at Module._compile (node:internal/modules/cjs/loader:1491:20)
  at Object..js (node:internal/modules/cjs/loader:1691:10)
  at Module.load (node:internal/modules/cjs/loader:1317:32)
  at Function._load (node:internal/modules/cjs/loader:1127:12)
  at TracingChannel.traceSync (node:diagnostics_channel:315:14)
  at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
  at Module.require (node:internal/modules/cjs/loader:1339:12)
  at require (node:internal/modules/helpers:125:16)
  at C:\dev\js\nuxt-sentry-test\node_modules\.pnpm\@opentelemetry+resources@1.26.0_@opentelemetry+api@1.9.0\node_modules\@opentelemetry\resources\build\esm\detectors\platform\node\machine-id\getMachineId.js:30:25

[s1gr1d]

Hello, can you give us a small code reproduction so we can debug this efficiently? :)

[TrezorTop]

Indeed, but my code is unremarkable. It is a brand-new, standard Nuxt project.

Here is my nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',

  devtools: { enabled: true },

  modules: ["@sentry/nuxt/module"],
})

package.json:

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@sentry/nuxt": "^8.33.1",
    "nuxt": "^3.13.0",
    "vue": "latest",
    "vue-router": "latest"
  },
  "packageManager": "pnpm@9.4.0+sha1.9217c800d4ab947a7aee520242a7b70d64fc7638"
}

sentry.client.config.ts:

import * as Sentry from "@sentry/nuxt";

Sentry.init({
  // If set up, you can use your runtime config here
  // dsn: useRuntimeConfig().public.sentry.dsn,
  dsn: "https://417a6acdaa42cf95c2271c2fa14541d9@o4504802128101376.ingest.us.sentry.io/4508092319727616",

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

sentry.server.config.ts:

import * as Sentry from "@sentry/nuxt";

Sentry.init({
  dsn: "https://417a6acdaa42cf95c2271c2fa14541d9@o4504802128101376.ingest.us.sentry.io/4508092319727616",
});

That's all. The rest is just the default Nuxt app scaffolding.

[s1gr1d]

I'll take a look at this