Seeing warnings about unsupported file type: undefined for SVG images

[dabeeeenster]

Have you read the Contributing Guidelines on issues?

• [X] I have read the Contributing Guidelines on issues.

Prerequisites

• [X] I'm using the latest version of Docusaurus.
• [X] I have tried the npm run clear or yarn clear command.
• [X] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• [X] I have tried creating a repro with https://new.docusaurus.io.
• [X] I have read the console error message carefully (if applicable).

Description

When running npm run build after upgrading to docusaurus 3.1.0 I have started seeing the following WARNING errors in the console:

[WARNING] The image at "/Users/ben/flagsmith/flagsmith/docs/static/img/saas-architecture.svg" can't be read correctly. Please ensure it's a valid image.
unsupported file type: undefined (file: /Users/ben/flagsmith/flagsmith/docs/static/img/saas-architecture.svg)
[WARNING] The image at "/Users/ben/flagsmith/flagsmith/docs/static/img/self-hosted-architecture.svg" can't be read correctly. Please ensure it's a valid image.
unsupported file type: undefined (file: /Users/ben/flagsmith/flagsmith/docs/static/img/self-hosted-architecture.svg)
[WARNING] The image at "/Users/ben/flagsmith/flagsmith/docs/static/img/flagsmith-model.svg" can't be read correctly. Please ensure it's a valid image.
unsupported file type: undefined (file: /Users/ben/flagsmith/flagsmith/docs/static/img/flagsmith-model.svg)
[WARNING] The image at "/Users/ben/flagsmith/flagsmith/docs/static/img/self-hosted-architecture.svg" can't be read correctly. Please ensure it's a valid image.
unsupported file type: undefined (file: /Users/ben/flagsmith/flagsmith/docs/static/img/self-hosted-architecture.svg)
[WARNING] The image at "/Users/ben/flagsmith/flagsmith/docs/static/img/self-hosted-architecture.svg" can't be read correctly. Please ensure it's a valid image.
unsupported file type: undefined (file: /Users/ben/flagsmith/flagsmith/docs/static/img/self-hosted-architecture.svg)
[WARNING] The image at "/Users/ben/flagsmith/flagsmith/docs/static/img/flagsmith-model.svg" can't be read correctly. Please ensure it's a valid image.
unsupported file type: undefined (file: /Users/ben/flagsmith/flagsmith/docs/static/img/flagsmith-model.svg)
[WARNING] The image at "/Users/ben/flagsmith/flagsmith/docs/static/img/saas-architecture.svg" can't be read correctly. Please ensure it's a valid image.
unsupported file type: undefined (file: /Users/ben/flagsmith/flagsmith/docs/static/img/saas-architecture.svg)
[WARNING] The image at "/Users/ben/flagsmith/flagsmith/docs/static/img/sdk-remote-evaluation.svg" can't be read correctly. Please ensure it's a valid image.
unsupported file type: undefined (file: /Users/ben/flagsmith/flagsmith/docs/static/img/sdk-remote-evaluation.svg)
[WARNING] The image at "/Users/ben/flagsmith/flagsmith/docs/static/img/sdk-local-evaluation.svg" can't be read correctly. Please ensure it's a valid image.
unsupported file type: undefined (file: /Users/ben/flagsmith/flagsmith/docs/static/img/sdk-local-evaluation.svg)
[WARNING] The image at "/Users/ben/flagsmith/flagsmith/docs/static/img/self-hosted-architecture.svg" can't be read correctly. Please ensure it's a valid image.
unsupported file type: undefined (file: /Users/ben/flagsmith/flagsmith/docs/static/img/self-hosted-architecture.svg)
[WARNING] The image at "/Users/ben/flagsmith/flagsmith/docs/static/img/sdk-remote-evaluation.svg" can't be read correctly. Please ensure it's a valid image.
unsupported file type: undefined (file: /Users/ben/flagsmith/flagsmith/docs/static/img/sdk-remote-evaluation.svg)
[WARNING] The image at "/Users/ben/flagsmith/flagsmith/docs/static/img/sdk-local-evaluation.svg" can't be read correctly. Please ensure it's a valid image.
unsupported file type: undefined (file: /Users/ben/flagsmith/flagsmith/docs/static/img/sdk-local-evaluation.svg)

You can find the images referenced here: https://github.com/Flagsmith/flagsmith/tree/main/docs/static/img e.g. https://github.com/Flagsmith/flagsmith/blob/main/docs/static/img/self-hosted-architecture.svg

These are optimised SVG images but they are valid and display fine in browsers.

Reproducible demo

https://github.com/Flagsmith/flagsmith/pull/3246

Steps to reproduce

1. Run npm run build
2. See warning about SVGs

Expected behavior

No warning should show as the images are valid

Actual behavior

Receive warnings [WARNING] The image at "/Users/ben/flagsmith/flagsmith/docs/static/img/saas-architecture.svg" can't be read correctly. Please ensure it's a valid image.

Your environment

• Public source code: https://github.com/Flagsmith/flagsmith/pull/3246
• Public site URL: https://docs.flagsmith.com/
• Docusaurus version used: 3.1.0
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Node v20.9.0
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): MacOS 14.2.1 (23C71)

Self-service

• [ ] I'd be willing to fix this bug myself.

[slorber]

Can you create 2 minimal runnable repros?

• one should show that the warning was not there in 3.0.1
• the other should show the warning appearing in 3.1.0

I doubt it's the upgrade that led this warning to appear, because the new release doesn't contain any code change related to this.

My believe is that this warning has likely always been there, when you reference svgs in markdown content.

I'd kindly ask you to invest time to qualify better this potential bug.

[dabeeeenster]

Ah yes you are correct @slorber ! It was my clearing the build cache that caused the warnings to reappear. I'm still not clear why they are being thrown however? I believe the SVG files are valid?

[slorber]

Ah yes you are correct @slorber ! It was my clearing the build cache that caused the warnings to reappear. I'm still not clear why they are being thrown however? I believe the SVG files are valid?

That's likely a bug related to using svg files using markdown image syntax.

We should probably find a way to read the dimensions of local svg files to apply them to the <img> tag, so that it doesn't produce layout shifts when the svgs load.

Hmm apparently our lib "image-size" is supposed to handle svgs as well, so it's probably a bug in this library.

https://github.com/image-size/image-size

Can you provide a sample SVG? Can you try reading its dimensions with that lib?

• If it works with the lib but not with Docusaurus, then report the bug to the lib. We'll wait for a fix and upgrade the lib once a fix is available.
• If it works with the lib but not Docusaurus, then it's a Docusaurus bug.

[dabeeeenster]

OK yep https://gist.github.com/dabeeeenster/004e82c3e344707751f294c16d5ddf50 shows the error being thrown in that library - issue raised here.

[damageboy]

FWIW, I have the same issue with editable svg's saved with draw.io.

For now my solution is to add a build step that is invoked before yarn build:

# finds all .svg files and passes them to xargs to paraellelize
# svgo-ing them in groups of 10 (this avoids paying nodejs JIT time for every file)
fd -e svg -0 | xargs -0 -P $(nproc) -n 10 svgo                                                                                                              ─╯

[Airkro]

Pin image-size to v1.0.x fix this:

// package.json
{
  "devDependencies": {
    "image-size": "~1.0.2"
  }
}

[xiaogaozi]

For anyone who use Yarn to build Docusaurus, you can force Yarn use specific version of image-size by add following lines to package.json:

{
  "resolutions": {
    "image-size": "~1.0.2"
  }
}