Support gifs in ideal image plugin

semoal commented 3 years ago

🐛 Bug Report

Plugin itsel supports .gif (on webpack configuration) but this plugin doesn't work with gif https://github.com/endiliey/responsive-loader (i guess)

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

<Image
  img={require("../../static/img/real-code.gif")}
/>

Expected behavior

To work correctly.

Actual Behavior

./static/img/real-code.gif
Error: No mime type for file with extension gifsupported
 @ ./src/pages/index.tsx 1:9091-9132
 @ ./.docusaurus/registry.js
 @ ./node_modules/@docusaurus/core/lib/client/exports/ComponentCreator.js
 @ ./.docusaurus/routes.js
 @ ./node_modules/@docusaurus/core/lib/client/clientEntry.js
 @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/@docusaurus/core/lib/client/clientEntry.js

Your Environment

Docusaurus version used: alpha@70

slorber commented 3 years ago

hmmm that's right, I didn't expect this to work.

Temporarily we could remove it from the Webpack config.

It seems the latest sharp package can handle gifs: https://github.com/lovell/sharp/pull/2012

But it requires a custom libvips install: https://sharp.pixelplumbing.com/install#custom-libvips

I'd rather document that we don't support gif resizes in that plugin, and let the user build his own plugin if he wants to

alex-drocks commented 3 years ago

It actually cannot use .gif images in general :(

I tried:

//docs/file.mdx
import Image from '@theme/IdealImage';
import LazyLoad from 'react-lazyload';
import additionSoustraction from "../../static/img/transactions/additions-soustractions.gif"
//...
<Image img={additionSoustraction}/>

<LazyLoad height={381}>
  <img src={additionSoustraction} alt={"Exemple d'addition et soustraction"}/>
</LazyLoad>

<img src="../../static/img/transactions/additions-soustractions.gif" alt="Exemple d'addition et soustraction"/>

<img src="./additions-soustractions.gif" alt="Exemple d'addition et soustraction"/>

None of these will show the .gif image.` The problem seems to be at the loader level I don't know if it's webpack or internals.

Only those will work:

<img
  src="https://docs.finance-d.com/logiciel-tenue-de-livres-simplifiee/test-gif-image/additions-soustractions.gif"
  alt="Exemple d'addition et soustraction"
/>

// Only in production builds:
<LazyLoad height={381}>
  <img
    src="../../../img/transactions/additions-soustractions.gif" // the build path only accessible in production
    alt="Exemple d'addition et soustraction"
  />
</LazyLoad>

Rocket-Fish commented 3 years ago

In case anyone else is stuck on this issue. Workaround on 2.0.0-alpha.72 would be to just use markdown ![dodge gif](./dodge.gif) Im not sure why this works, maybe its skipping the rule ideal image chained into webpack somehow?

What doesn't work is the following:

import Image from '@theme/IdealImage';
<Image img={require('./dodge.gif')} />

I ran the build command and saw some extra logs:

Client bundle compiled with errors therefore further build is impossible.
./docs/uploads/dodge.gif
Module build failed (from ./node_modules/@endiliey/responsive-loader/lib/index.js):
Error: No mime type for file with extension gifsupported
    at Object.loader (/Users/[redacted-path]/[redacted-project-name]/node_modules/@endiliey/responsive-loader/lib/index.js:78:29)

I checked the ideal image plugin and its webpack config includes gif packages/docusaurus-plugin-ideal-image/src/index.ts

However If we go check @docusaurus/responsive-loader on npm itself it doesn't seem to say it support gifs?

If we go further up the fork tree.

@docusaurus/responsive-loader is based off of slorber/responsive-loader

which is in turn fork of rdilweb/responsive-loader

which is then in turn a fork of endiliey/responsive-loader

if one goes to any of those 3 repositories above and look at index.js line 4; none of them contains the mime type gif. Am I missing something? or does it look like gif support is missing/removed in this loader entirely?

I checked blame for the repository git blame for the file

It seems like someone disabled gif mime type 5 years ago?

slorber commented 3 years ago

Going to remove the .gif extension from the ideal image loader regexp in https://github.com/facebook/docusaurus/pull/4708 as for me it's a mistake.

Please don't consider ideal image support gif: if you want to add gif support, you will need to add your own webpack loader for now.

I consider this issue a feature request, and we'll eventually see how to add gif support if it's not too complicated

facebook / docusaurus