From 7e5330e756e60b32de7ec939ab1b8408b71708bb Mon Sep 17 00:00:00 2001 From: Arjo Bruijnes Date: Thu, 12 Mar 2026 15:05:43 +0100 Subject: [PATCH 1/5] Update babel config to automatically import jsx constructor --- .../pluggable-widgets-tools/configs/eslint.js.base.json | 2 +- .../pluggable-widgets-tools/configs/eslint.ts.base.json | 2 +- packages/pluggable-widgets-tools/configs/rollup.config.mjs | 2 +- .../configs/rollup.config.native.mjs | 2 +- .../test-config/__mocks__/NativeIcon.js | 4 ++-- .../test-config/__mocks__/WebIcon.js | 4 ++-- .../test-config/jest-svg-transformer.js | 6 +++--- packages/pluggable-widgets-tools/test-config/transform.js | 2 +- 8 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/pluggable-widgets-tools/configs/eslint.js.base.json b/packages/pluggable-widgets-tools/configs/eslint.js.base.json index bf2d7401..5a18ebfb 100644 --- a/packages/pluggable-widgets-tools/configs/eslint.js.base.json +++ b/packages/pluggable-widgets-tools/configs/eslint.js.base.json @@ -8,7 +8,7 @@ "settings": { "react": { "createClass": "createReactClass", - "pragma": "createElement", + "pragma": "React", "version": "detect" } }, diff --git a/packages/pluggable-widgets-tools/configs/eslint.ts.base.json b/packages/pluggable-widgets-tools/configs/eslint.ts.base.json index 660df6ff..37bc64b4 100644 --- a/packages/pluggable-widgets-tools/configs/eslint.ts.base.json +++ b/packages/pluggable-widgets-tools/configs/eslint.ts.base.json @@ -8,7 +8,7 @@ "settings": { "react": { "createClass": "createReactClass", - "pragma": "createElement", + "pragma": "React", "version": "detect" } }, diff --git a/packages/pluggable-widgets-tools/configs/rollup.config.mjs b/packages/pluggable-widgets-tools/configs/rollup.config.mjs index b6201dbf..ad46da6b 100644 --- a/packages/pluggable-widgets-tools/configs/rollup.config.mjs +++ b/packages/pluggable-widgets-tools/configs/rollup.config.mjs @@ -247,7 +247,7 @@ export default async args => { }, { exclude: /node_modules/, - plugins: [["@babel/plugin-transform-react-jsx", { pragma: "createElement" }]] + plugins: [["@babel/plugin-transform-react-jsx", { runtime: "automatic" }]] } ] }), diff --git a/packages/pluggable-widgets-tools/configs/rollup.config.native.mjs b/packages/pluggable-widgets-tools/configs/rollup.config.native.mjs index 51c3265d..ad2be6d1 100644 --- a/packages/pluggable-widgets-tools/configs/rollup.config.native.mjs +++ b/packages/pluggable-widgets-tools/configs/rollup.config.native.mjs @@ -204,7 +204,7 @@ export default async args => { }, { exclude: /node_modules/, - plugins: [["@babel/plugin-transform-react-jsx", { pragma: "createElement" }]] + plugins: [["@babel/plugin-transform-react-jsx", { runtime: "automatic" }]] } ] }), diff --git a/packages/pluggable-widgets-tools/test-config/__mocks__/NativeIcon.js b/packages/pluggable-widgets-tools/test-config/__mocks__/NativeIcon.js index fce75214..462bb13f 100644 --- a/packages/pluggable-widgets-tools/test-config/__mocks__/NativeIcon.js +++ b/packages/pluggable-widgets-tools/test-config/__mocks__/NativeIcon.js @@ -1,6 +1,6 @@ -const { createElement } = require("react"); +const { jsx } = require("react/jsx-runtime"); const { View } = require("react-native"); module.exports = { - Icon: () => createElement(View, { testId: "icon" }) + Icon: () => jsx(View, { testId: "icon" }) } diff --git a/packages/pluggable-widgets-tools/test-config/__mocks__/WebIcon.js b/packages/pluggable-widgets-tools/test-config/__mocks__/WebIcon.js index 1d63a43d..79c6b161 100644 --- a/packages/pluggable-widgets-tools/test-config/__mocks__/WebIcon.js +++ b/packages/pluggable-widgets-tools/test-config/__mocks__/WebIcon.js @@ -1,5 +1,5 @@ -import { createElement } from "react"; +import { jsx } from "react/jsx-runtime"; module.exports = { - Icon: () => createElement("img", { src: "mocked/web/icon" }) + Icon: () => jsx("img", { src: "mocked/web/icon" }) }; diff --git a/packages/pluggable-widgets-tools/test-config/jest-svg-transformer.js b/packages/pluggable-widgets-tools/test-config/jest-svg-transformer.js index 2076b904..80f89f91 100644 --- a/packages/pluggable-widgets-tools/test-config/jest-svg-transformer.js +++ b/packages/pluggable-widgets-tools/test-config/jest-svg-transformer.js @@ -12,10 +12,10 @@ module.exports = { .join(''); return { - code: ` -const React = require('react'); + code: ` +const jsxRuntime = require('react/jsx-runtime'); function ${name}(props) { - return React.createElement( + return jsxRuntime.jsx( 'svg', Object.assign({}, props, {'data-file-name': ${name}.name}) ); diff --git a/packages/pluggable-widgets-tools/test-config/transform.js b/packages/pluggable-widgets-tools/test-config/transform.js index c0b4ded5..084870d2 100644 --- a/packages/pluggable-widgets-tools/test-config/transform.js +++ b/packages/pluggable-widgets-tools/test-config/transform.js @@ -6,6 +6,6 @@ module.exports = require("babel-jest").createTransformer({ plugins: [ "@babel/plugin-transform-class-properties", "@babel/plugin-transform-private-methods", - ["@babel/plugin-transform-react-jsx", { pragma: "createElement" }] + ["@babel/plugin-transform-react-jsx", { runtime: "automatic" }] ] }); From b1a3bb40010b5d80e3d4d920e210c54ecfcf6d43 Mon Sep 17 00:00:00 2001 From: Arjo Bruijnes Date: Thu, 12 Mar 2026 15:16:42 +0100 Subject: [PATCH 2/5] Update changelog --- packages/pluggable-widgets-tools/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/pluggable-widgets-tools/CHANGELOG.md b/packages/pluggable-widgets-tools/CHANGELOG.md index 9e1423ef..dd793631 100644 --- a/packages/pluggable-widgets-tools/CHANGELOG.md +++ b/packages/pluggable-widgets-tools/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 the bundling of Javascript widgets which broke in 11.6.0 after migrating to [React 17's JSX Transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#how-to-upgrade-to-the-new-jsx-transform). (Ticket 270777) + ## [11.8.0] - 2026-03-06 ### Added From 9773dc711c96879e9c30ea17e846af686f9e74ca Mon Sep 17 00:00:00 2001 From: Arjo Bruijnes Date: Thu, 12 Mar 2026 15:16:55 +0100 Subject: [PATCH 3/5] Bump version --- packages/pluggable-widgets-tools/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/pluggable-widgets-tools/package.json b/packages/pluggable-widgets-tools/package.json index 7410d883..bbee58e0 100644 --- a/packages/pluggable-widgets-tools/package.json +++ b/packages/pluggable-widgets-tools/package.json @@ -1,6 +1,6 @@ { "name": "@mendix/pluggable-widgets-tools", - "version": "11.8.0", + "version": "11.8.1", "description": "Mendix Pluggable Widgets Tools", "engines": { "node": ">=20" From 90d61970490b19b1e4e47a71281821cb53fa53b4 Mon Sep 17 00:00:00 2001 From: Arjo Bruijnes Date: Thu, 12 Mar 2026 15:30:07 +0100 Subject: [PATCH 4/5] Fixup: Continue using React.createElement for custom components --- .../test-config/__mocks__/NativeIcon.js | 4 ++-- .../pluggable-widgets-tools/test-config/__mocks__/WebIcon.js | 4 ++-- .../test-config/jest-svg-transformer.js | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/pluggable-widgets-tools/test-config/__mocks__/NativeIcon.js b/packages/pluggable-widgets-tools/test-config/__mocks__/NativeIcon.js index 462bb13f..fce75214 100644 --- a/packages/pluggable-widgets-tools/test-config/__mocks__/NativeIcon.js +++ b/packages/pluggable-widgets-tools/test-config/__mocks__/NativeIcon.js @@ -1,6 +1,6 @@ -const { jsx } = require("react/jsx-runtime"); +const { createElement } = require("react"); const { View } = require("react-native"); module.exports = { - Icon: () => jsx(View, { testId: "icon" }) + Icon: () => createElement(View, { testId: "icon" }) } diff --git a/packages/pluggable-widgets-tools/test-config/__mocks__/WebIcon.js b/packages/pluggable-widgets-tools/test-config/__mocks__/WebIcon.js index 79c6b161..1d63a43d 100644 --- a/packages/pluggable-widgets-tools/test-config/__mocks__/WebIcon.js +++ b/packages/pluggable-widgets-tools/test-config/__mocks__/WebIcon.js @@ -1,5 +1,5 @@ -import { jsx } from "react/jsx-runtime"; +import { createElement } from "react"; module.exports = { - Icon: () => jsx("img", { src: "mocked/web/icon" }) + Icon: () => createElement("img", { src: "mocked/web/icon" }) }; diff --git a/packages/pluggable-widgets-tools/test-config/jest-svg-transformer.js b/packages/pluggable-widgets-tools/test-config/jest-svg-transformer.js index 80f89f91..48fcda8c 100644 --- a/packages/pluggable-widgets-tools/test-config/jest-svg-transformer.js +++ b/packages/pluggable-widgets-tools/test-config/jest-svg-transformer.js @@ -13,9 +13,9 @@ module.exports = { return { code: ` -const jsxRuntime = require('react/jsx-runtime'); +const React = require('react'); function ${name}(props) { - return jsxRuntime.jsx( + return React.createElement( 'svg', Object.assign({}, props, {'data-file-name': ${name}.name}) ); From 5b17e5edb0da8a17815475e1518319abceee8353 Mon Sep 17 00:00:00 2001 From: Arjo Bruijnes Date: Thu, 12 Mar 2026 15:34:55 +0100 Subject: [PATCH 5/5] Drop default options from eslint config --- .../pluggable-widgets-tools/configs/eslint.js.base.json | 8 +------- .../pluggable-widgets-tools/configs/eslint.ts.base.json | 8 +------- 2 files changed, 2 insertions(+), 14 deletions(-) diff --git a/packages/pluggable-widgets-tools/configs/eslint.js.base.json b/packages/pluggable-widgets-tools/configs/eslint.js.base.json index 5a18ebfb..9ef91aee 100644 --- a/packages/pluggable-widgets-tools/configs/eslint.js.base.json +++ b/packages/pluggable-widgets-tools/configs/eslint.js.base.json @@ -7,14 +7,13 @@ }, "settings": { "react": { - "createClass": "createReactClass", - "pragma": "React", "version": "detect" } }, "extends": [ "eslint:recommended", "plugin:react/recommended", + "plugin:react/jsx-runtime", "prettier", "plugin:prettier/recommended", "plugin:react-hooks/recommended" @@ -25,9 +24,6 @@ "babelOptions": { "presets": ["@babel/preset-react"] }, - "ecmaFeatures": { - "jsx": true - }, "ecmaVersion": 2018, "sourceType": "module" }, @@ -37,8 +33,6 @@ "react/prop-types": "off", "react/no-deprecated": "warn", "react/jsx-uses-vars": "error", - "react/jsx-uses-react": "off", - "react/react-in-jsx-scope": "off", "jest/no-disabled-tests": "warn", "jest/no-focused-tests": "error", diff --git a/packages/pluggable-widgets-tools/configs/eslint.ts.base.json b/packages/pluggable-widgets-tools/configs/eslint.ts.base.json index 37bc64b4..1f0bb7ae 100644 --- a/packages/pluggable-widgets-tools/configs/eslint.ts.base.json +++ b/packages/pluggable-widgets-tools/configs/eslint.ts.base.json @@ -7,14 +7,13 @@ }, "settings": { "react": { - "createClass": "createReactClass", - "pragma": "React", "version": "detect" } }, "extends": [ "eslint:recommended", "plugin:react/recommended", + "plugin:react/jsx-runtime", "plugin:@typescript-eslint/recommended", "prettier", "plugin:prettier/recommended", @@ -22,9 +21,6 @@ ], "parser": "@typescript-eslint/parser", "parserOptions": { - "ecmaFeatures": { - "jsx": true - }, "project": "tsconfig.json", "ecmaVersion": 2018, "sourceType": "module" @@ -81,8 +77,6 @@ "react/jsx-boolean-value": ["error", "never"], "react/no-deprecated": "warn", "react/jsx-uses-vars": "error", - "react/jsx-uses-react": "off", - "react/react-in-jsx-scope": "off", "array-callback-return": "error", "curly": "error",