fix: do not use ideal image plugin in dev env (#5540)

* fix: do not use ideal image plugin in dev env

* Back to JS

Author: lex111

packages/docusaurus-plugin-ideal-image/src/index.ts

@@ -14,8 +14,6 @@ export default function (
   _context: LoadContext,
   options: PluginOptions,
 ): Plugin<void> {
-  const isProd = process.env.NODE_ENV === 'production';
-
   return {
     name: 'docusaurus-plugin-ideal-image',
 
@@ -24,6 +22,10 @@ export default function (
     },
 
     configureWebpack(_config: Configuration, isServer: boolean) {
+      if (process.env.NODE_ENV !== 'production') {
+        return {};
+      }
+
       return {
         mergeStrategy: {
           'module.rules': 'prepend',
@@ -38,7 +40,6 @@ export default function (
                   loader: require.resolve('@docusaurus/responsive-loader'),
                   options: {
                     emitFile: !isServer, // don't emit for server-side rendering
-                    disable: !isProd,
                     // eslint-disable-next-line global-require
                     adapter: require('@docusaurus/responsive-loader/sharp'),
                     name: 'assets/ideal-img/[name].[hash:hex:7].[width].[ext]',

packages/docusaurus-plugin-ideal-image/src/theme/IdealImage.js

@@ -4,11 +4,18 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 import React from 'react';
 import IdealImage from '@endiliey/react-ideal-image';
 
 function Image(props) {
   const {alt, className, img} = props;
+
+  // In dev env just use regular img with original file
+  if (img.default) {
+    return <img src={img.default} className={className} alt={alt} {...props} />;
+  }
+
   return (
     <IdealImage
       {...props}