[WC-2844] Fix the compatibility with react client for Color Picker (#1499)

Author: r0b1n

packages/pluggableWidgets/color-picker-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We fixed an issue with Color Picker not working in React client.
+
 ## [2.1.2] - 2024-08-28
 
 ### Changed

packages/pluggableWidgets/color-picker-web/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/color-picker-web",
     "widgetName": "ColorPicker",
-    "version": "2.1.2",
+    "version": "2.1.3",
     "description": "Change a color using a color input",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "repository": {
@@ -21,7 +21,8 @@
     "marketplace": {
         "minimumMXVersion": "9.6.0",
         "appNumber": 107044,
-        "appName": "Color Picker"
+        "appName": "Color Picker",
+        "reactReady": true
     },
     "packagePath": "com.mendix.widget.custom",
     "scripts": {

packages/pluggableWidgets/color-picker-web/rollup.config.js

@@ -0,0 +1,28 @@
+import commonjs from "@rollup/plugin-commonjs";
+
+export default args => {
+    const result = args.configDefaultConfig;
+    return result.map((config, _index) => {
+        if (config.output.format !== "es") {
+            return config;
+        }
+        return {
+            ...config,
+            plugins: config.plugins.map(plugin => {
+                if (plugin && plugin.name === "commonjs") {
+                    // replace common js plugin that transforms
+                    // external requires to imports
+                    // this is needed in order to work with modern client
+                    return commonjs({
+                        extensions: [".js", ".jsx", ".tsx", ".ts"],
+                        transformMixedEsModules: true,
+                        requireReturnsDefault: "auto",
+                        esmExternals: true
+                    });
+                }
+
+                return plugin;
+            })
+        };
+    });
+};

packages/pluggableWidgets/color-picker-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="ColorPicker" version="2.1.2" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="ColorPicker" version="2.1.3" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="ColorPicker.xml" />
         </widgetFiles>