Requesting SVGs via <NuxtImg /> results in 500 since 2.0.0

[Kuuzoo]

When trying to request any SVG using <NuxtImg /> tag I do get a error 500 containing the following error message. This was not an issue before using version 2.0.0. I'm using bun 1.3.2 as a package manager.

[500] [IPX_ERROR] Cannot find module 'projectroot/server/node_modules/svgo/node_modules/css-tree/lib/index.js' imported from projectroot/server/node_modules/svgo/plugins/cleanupEnableBackground.js\nDid you mean to import \"css-tree/cjs/index.cjs\"?

Also out of curiosity how would we best install the sharp binaries for our production server? I'm building on a darwin arm64 system but want to build for target linux x64? I can install the packages using bun install --cpu=x64 --os=linux but it will still log the following after building ℹ sharp binaries have been included in your build for darwin-arm64. Make sure you deploy to the same architecture. @nuxt/image 10:02:48 AM

[miguel-arrf]

We have the same issue for SVGs.

[n-rowe]

This is because of an upstream issue in css-tree.

I was able to workaround the issue by overriding the css-tree version in my project so that it's the same. I had css-tree 3.x and 2.x as peer dependencies in the same project and making them all 2.x seemed to work. I checked with pnpm why css-tree

see: https://github.com/nuxt/image/issues/1967#issuecomment-3521988668

[Kuuzoo]

This is because of an upstream issue in css-tree.

I was able to workaround the issue by overriding the css-tree version in my project so that it's the same. I had css-tree 3.x and 2.x as peer dependencies in the same project and making them all 2.x seemed to work. I checked with pnpm why css-tree

see: #1967 (comment)

I see, thank you for the insight. Still I think it would be great to get this resolved in the regarding packages.

https://github.com/svg/svgo/issues/2149#issuecomment-3632467489

If you say it works on 2.x and svgo does directly require 3.x (based on the linked comment above), maybe @SethFalco's thought of replacing the whole css-tree dependency inside of svgo would now be a good thing to do.

[develth]

This fixed it for me (yarn):

package.json:

"resolutions": {
  "css-tree": "2.2.1"
}

nuxt.config.ts:

nitro: {
    externals: {
      traceInclude: [
        'node_modules/css-tree/data/patch.json',
      ]
    }
},

[Willen17]

I am using npm and doing the equivalent thing that @develth and @n-rowe suggested did not remove the error.

package.json:

 "overrides": {
    "sharp": "0.34.4",
    "css-tree": "2.2.1"
  },

nuxt.config.ts:

  nitro: {
    externals: {
      traceInclude: [
        // https://github.com/nuxt/image/issues/2035
        'node_modules/css-tree/data/patch.json'
      ]
    }
  }

[develth]

@Willen17 did you removed .nuxt and node_modules before testing?

[Willen17]

@develth Yup. Still getting errors such as this for SVGs:

{
    "error": {
        "message": "[500] [IPX_ERROR] Cannot find module '../data/patch.json'\nRequire stack:\n- /home/nuxt/.output/server/node_modules/css-tree/lib/data-patch.js"
    }
}

[0x4c756e61]

@develth Yup. Still getting errors such as this for SVGs:

{
    "error": {
        "message": "[500] [IPX_ERROR] Cannot find module '../data/patch.json'\nRequire stack:\n- /home/nuxt/.output/server/node_modules/css-tree/lib/data-patch.js"
    }
}

Having the same issue here, with SVGs as well

[develth]

whats in that folder? /home/nuxt/.output/server/node_modules/css-tree/

[0x4c756e61]

whats in that folder? /home/nuxt/.output/server/node_modules/css-tree/

$ ls .output/server/node_modules/css-tree/
lib/ 
package.json