Make image minimizing optional based on sharp package availability

web/package.json

@@ -51,7 +51,6 @@
     "process": "^0.11.10",
     "prop-types": "^15.7.2",
     "resize-observer-polyfill": "^1.5.1",
-    "sharp": "^0.34.3",
     "shim-loader": "^1.0.1",
     "style-loader": "^4.0.0",
     "stylis": "^4.3.4",
@@ -67,6 +66,9 @@
     "webpack-cli": "^6.0.1",
     "yarn-audit-html": "7.3.2"
   },
+  "optionalDependencies": {
+    "sharp": "^0.34.3"
+  },
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/preset-react": "^7.12.13",

web/webpack.config.js

@@ -26,6 +26,14 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
 const CopyPlugin = require('copy-webpack-plugin');
 const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
 
+let isSharpAvailable = true;
+try {
+  require.resolve('sharp');
+} catch (e) {
+  isSharpAvailable = false;
+  console.warn('Sharp is not available, image optimization will be disabled.');
+}
+
 const envType = PRODUCTION ? 'production': 'development';
 const devToolVal = PRODUCTION ? false : 'eval';
 const analyzerMode = process.env.ANALYZE=='true' ? 'static' : 'disabled';
@@ -351,6 +359,7 @@ module.exports = [{
           compress: true,
         },
       }),
+    ].concat(isSharpAvailable ? [
       new ImageMinimizerPlugin({
         test: /\.(jpe?g|png|gif)$/i,
         minimizer: {
@@ -372,7 +381,7 @@ module.exports = [{
           },
         },
       }),
-    ] : [],
+    ] : []) : [],
     splitChunks: {
       cacheGroups: {
         vendor_sqleditor: {

web/yarn.lock

@@ -13010,6 +13010,9 @@ __metadata:
     wkx: "npm:^0.5.0"
     yarn-audit-html: "npm:7.3.2"
     zustand: "npm:^5.0.5"
+  dependenciesMeta:
+    sharp:
+      optional: true
   languageName: unknown
   linkType: soft