Open TrezorTop opened 2 weeks ago
Hello, can you give us a small code reproduction so we can debug this efficiently? :)
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.
I'll take a look at this
I have found that the Nuxt application builds and runs fine, but the issue only occurs when running on localhost. To resolve this, we need to enable the nuxt module only for the build process. A temporary solution would be to edit the nuxt.config.js
file:
export default defineNuxtConfig({
compatibilityDate: "2024-04-03",
devtools: { enabled: true },
css: ["~/assets/styles/main.css"],
modules: [
// "@sentry/nuxt/module" causes errors while running on localhost
...(process.env.ENABLE_SENTRY === 'true' ? ["@sentry/nuxt/module"] : [])
],
// @ts-expect-error: @sentry/nuxt/module causes errors while running on localhost
sentry: {
sourceMapsUploadOptions: {
org: "switchcase-devs",
project: "nuxt-js-template",
authToken: "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",
},
},
});
I just checked this and with your project setup, I got the error only in development mode (with nuxt dev
). But when building the project (with nuxt build
) and running the build locally, it worked fine. Can you confirm?
I also tried it with npm, yarn and pnpm v8.15 (so without the package.json
entry) and it worked in development mode as well. I still have to check why this causes issues with the latest pnpm version (v9).
But great that you found a workaround! In your case it makes sense to only run Sentry when you are not in dev mode. Something like this might also work:
modules: [
...(process.env.NODE_ENV !== 'development' ? ["@sentry/nuxt/module"] : [])
],
Yes, the project runs properly when building with nuxt build
, I can confirm that
Yes, the project runs properly when building with
nuxt build
, I can confirm that.
I implemented the changes successfully, but I'm encountering an issue with the Netlify build. The Nuxt config has a nitro.preset
set as the netlify
option. I made modifications to the start
script as per the documentation.
"start": "node --env-file=.env --import ./.nuxt/dist/server/sentry.server.config.mjs .nuxt/dist/server/index.mjs"
The build has no issues, but Sentry doesn't catch any issues.
In the alpha version, server-side monitoring is not supported when deploying to Netlify. The beta is coming with version 8.35.0, where the --import
flag is no longer necessary. Also, errors from the server-side will be reported when deploying to Netlify.
Version 8.35.0 still preserves this behaviour
I just tried it with pnpm
and couldn't reproduce the error "Cannot use import statement outside a module". But it seems like pnpm
cannot resolve the dependency of import-in-the-middle
and you have to explicitly add it to your dependencies. import-in-the-middle
is a dependency of @sentry/node
and @sentry/node
is a dependency of @sentry/nuxt
.
npm
gives the same error with import-in-the-middle
.
Attaching the Vercel logs
Adding the import-in-the-middle
explicitly to dependencies did not help.
I am going to use dynamicImportForServerEntry
with the value of false
as it helps, but I hope this is a temporary solution.
The error message looks similar but it's actually a slightly different one 😅
Without declaring import-in-the-middle
in the pnpm dependencies, the error says "Cannot find package 'import-in-the-middle' ", as the package is not even available.
However, the error message in your screenshot says "Cannot find module ..." (it needs the hook.mjs
module). Did you already add @vercel/nft
as an override? You can find more information about how to set this and why this is needed in the docs here.
I understand that this can feel frustrating, and we already filed an issue upstream to Nitro to fix the missing hook.mjs
file so the override is not needed anymore.
Is there an existing issue for this?
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
sentry.server.config.ts
Steps to Reproduce
Expected Result
Nuxt app on the localhost have been successfully launched.
Actual Result
Getting 500 response from the Nuxt server instance: