nuxt-modules / og-image

Generate OG Images with Vue templates in Nuxt.
https://nuxtseo.com/og-image
360 stars 23 forks source link

Error no such file or directory - debug.json #172

Closed modbender closed 3 months ago

modbender commented 3 months ago

Just till recently (less than a week ago) I had no problem using @nuxtjs/seo, but suddenly using the package gives me error:

Environment:

WSL Ubuntu (Windows 11)


"devDependencies": {
    "@nuxtjs/color-mode": "^3.3.2",
    "@nuxtjs/seo": "2.0.0-rc.8",
    "nuxt-bootstrap-css": "^1.1.0",
    "nuxt": "^3.10.3",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
}

Error

Error when using yarn:

[nitro 7:40:49 PM] ERROR Error: Could not load raw:/home/matrix/projects/nuxt/nuxt-project/node_modules/nuxt-og-image/dist/runtime/nitro/routes/debug.json (imported by virtual:#internal/nitro/virtual/server-handlers): ENOENT: no such file or directory, open '/home/matrix/projects/nuxt/nuxt-project/node_modules/nuxt-og-image/dist/runtime/nitro/routes/debug.json'

Error when using pnpm:

[nitro 8:34:04 PM] ERROR Error: Could not load raw:/home/matrix/projects/nuxt/nuxt-project/nodemodules/.pnpm/nuxt-og-image@3.0.0-rc.42@lezer+common@1.2.1@nuxt+devtools@1.0.8@vue+compiler-core@3.4.21__5jsibe7fmeqasy2foxnj4ksb7y/node_modules/nuxt-og-image/dist/runtime/nitro/routes/debug.json (imported by virtual:#internal/nitro/virtual/server-handlers): ENOENT: no such file or directory, open '/home/matrix/projects/nuxt/nuxt-project/nodemodules/.pnpm/nuxt-og-image@3.0.0-rc.42@lezer+common@1.2.1@nuxt+devtools@1.0.8@vue+compiler-core@3.4.21__5jsibe7fmeqasy2foxnj4ksb7y/node_modules/nuxt-og-image/dist/runtime/nitro/routes/debug.json'

Reproduction steps

  1. Simply create a new project npx nuxi@latest init <project-name>
  2. Install Nuxt SEO pnpm add -D @nuxtjs/seo and add it to modules
  3. Run pnpm dev.

What's in the installation

I went ahead and checked the installation path of nuxt-og-image, and indeed it seems like there's no debug.json, I don't know if .d.ts and .mjs gets resolved into debug.json though

image


Things I have tried

I have tried switching from pnpm to yarn.

I have tried previous versions of nuxt, vue, vue-router

I have tried previous versions:

"@nuxtjs/seo": "2.0.0-rc.7",
"@nuxtjs/seo": "2.0.0-rc.8",

I have also tried some old versions of nuxt-og-image. I know the current version is "nuxt-og-image": "3.0.0-rc.42" and I have tried till rc.37, which was part of a different project that WAS working perfectly fine...

"resolutions": {
  "nuxt-og-image": "3.0.0-rc.37"
}

I have also seen a similar issue and tried steps from it

At the end this might be an issue related to this project or not, but hoping I get some help.

dargmuesli commented 3 months ago

https://github.com/nuxt-modules/og-image/blob/6c8936d2d961571af64104c5abefba9bb7cf9291/src/module.ts#L341 Maybe it should be debug.json.mjs here?

dargmuesli commented 3 months ago

Ah, no, it's most likely related to nitro v2.9.2 including this PR: https://github.com/unjs/nitro/pull/2229

modbender commented 3 months ago

Ok looks like it indeed is nitro problem.

WORKAROUND AS BELOW

Add one of the below to package.json

"resolutions": {
  "nitropack": "2.9.1"
}

OR

"overrides": {
  "nitropack": "2.9.1"
}

Next, run npm install or whichever CLI you use.

CODE-BR3AKER commented 3 months ago

Ok looks like it indeed is nitro problem. Doing the below fixed it:

"resolutions": {
  "nitropack": "2.9.1"
}

where did you add this, can you explain ? @modbender

dargmuesli commented 3 months ago

!!!!! +++,

relax a bit please

then this error out of nowhere

without updating nitropack this issue should not occur

As you can see people are working on fixing that issue, please upvote the issue by giving it a :+1: instead of commenting without further information :pray:

where did you add this

To the package.json

modbender commented 3 months ago

@CODE-BR3AKER add it to package.json

Example from my project

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxtjs/color-mode": "^3.3.2",
    "@nuxtjs/seo": "2.0.0-rc.8",
    "nuxt": "^3.10.3",
    "nuxt-bootstrap-css": "^1.1.0",
    "nuxt-icon": "^0.6.9",
    "sass": "^1.71.1",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  },
  "resolutions": {
    "nitropack": "2.9.1"
  }
}
CODE-BR3AKER commented 3 months ago

Sorry I just been debuging this issue for 2 hours & I cannot seem to fix it :/

Screenshot 2024-03-09 at 18 02 18

I tried btw your proposed solution + removed node_modules, pkg lock , did a fresh npm install, but still same issue. ( I see somehow that nuxt dev ignores the resolutions & uses nitro 2.9.2) Any help is truly appreciated :pray:

modbender commented 3 months ago

You have to add it to package.json and run install npm install or yarn install or pnpm install

dargmuesli commented 3 months ago

Call it overrides instead of resolutions (https://stackoverflow.com/a/67397982)

(@harlan-zw please mark those comments as offtopic)

dargmuesli commented 3 months ago

Here's the Nuxt issue: https://github.com/nuxt/nuxt/issues/26168

SzymonDziak commented 3 months ago

I have the same issue in my project

dargmuesli commented 3 months ago

Again, please upvote the issue by giving it a 👍 instead of commenting without further information 🙏

SzymonDziak commented 3 months ago

@dargmuesli can you get this fixed today? whats the hold up?

dargmuesli commented 3 months ago

There no need to have this issue in a personal project, a workaround has been provided above.

@danielroe if I may ask for some moderation on the comments above at your discretion? Thanks :raised_hands:

pi0 commented 3 months ago

Regression re json should be fixed in latest nitro release (https://github.com/unjs/nitro/pull/2239)