nuxt / nuxt/image

Locally Added JPG and SVG Files Ruined After Latest Package Update in SSR Mode

Open
#1,818 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.5k
Forks
331
Avg merge
19h 52m
Merged PRs (30d)
9

Description

Following the latest update of the package, locally added JPG and SVG files are now malfunctioning, resulting in a 500 Internal Server Error.

Error Details:

For the SVG file, the server returns the following errors:

Error 1:

Request URL:
http://localhost:5000/_ipx/f_webp/imgs/thanks.svg
Request Method:
GET
Status Code:
500 Internal Server Error
Remote Address:
[::1]:5000
Referrer Policy:
strict-origin-when-cross-origin

# The previews object in the network console says:
{
    "error": {
        "message": "[500] [IPX_ERROR] \nSomething went wrong installing the \"sharp\" module\n\nCannot find module '../build/Release/sharp-linuxmusl-x64.node'\nRequire stack:\n- /app/.output/server/node_modules/sharp/lib/sharp.js\n- /app/.output/server/node_modules/sharp/lib/constructor.js\n- /app/.output/server/node_modules/sharp/lib/index.js\n\nPossible solutions:\n- Install with verbose logging and look for errors: \"npm install --ignore-scripts=false --foreground-scripts --verbose sharp\"\n- Install for the current linuxmusl-x64 runtime: \"npm install --platform=linuxmusl --arch=x64 sharp\"\n- Consult the installation documentation: https://sharp.pixelplumbing.com/install"
    }
}

and

Request URL:
http://localhost:5000/_ipx/f_webp&q_75&blur_75&s_50x50/imgs/thanks.svg
Request Method:
GET
Status Code:
500 Internal Server Error
Remote Address:
[::1]:5000
Referrer Policy:
strict-origin-when-cross-origin

# the preview is the same as above
Component Used:
<NuxtImg
        src="/imgs/thanks.svg"
        alt="thank you message icon"
        :placeholder="[50, 50, 75, 75]"
        format="webp"
        loading="lazy"
      />

Prior to the latest update, this SVG file was functioning correctly in SSR mode, but it is now broken in CSR mode, as detailed in issue #1806.

Additionally, another file, which was functional in both SSR and CSR modes, is as follows:

<NuxtImg
        src="/imgs/meTwentyFour.jpg"
        alt="personal-img"
        class="mi-imagen"
        :placeholder="[50, 50, 75, 75]"
        format="webp"
        loading="lazy"
/>
Conclusion:

This issue appears to be a regression introduced by the recent package update. I would appreciate any guidance on resolving this problem or any potential fixes that could be applied.

Thank you for your attention to this matter.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the NuxtImg requests for /imgs/thanks.svg and /imgs/meTwentyFour.jpg in SSR mode, using the shown placeholder and webp settings. Read the reported IPX error around the missing sharp-linuxmusl-x64.node module and compare the related CSR regression in issue #1806. Done means locally added JPG and SVG files no longer produce 500 errors after the package update.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
backend, performance, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.