[WTF-2548]: Configure Babel for New JSX Transform (#170)

## This PR contains

-   [x] Bug fix
-   [ ] Feature
-   [ ] Refactor
-   [ ] Documentation
-   [ ] Other (describe)

## What is the purpose of this PR?

The release of 11.6.0 introduced the new JSX transform for Typescript
widgets, but failed to update the babel config for Javascript widgets.
Resulting in Javascript widgets built with versions 11.6.0 and 11.8.0 to
error out in runtime.

## Relevant changes

Updates the babel config and other references to `createElement` to use
the `react/jsx-runtime` instead.

## What should be covered while testing?

- Javascript widgets function in runtime

Author: LEGIO-SEXTA-FERRATA

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

packages/pluggable-widgets-tools/configs/eslint.js.base.json

@@ -7,14 +7,13 @@
     },
     "settings": {
         "react": {
-            "createClass": "createReactClass",
-            "pragma": "createElement",
             "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",

packages/pluggable-widgets-tools/configs/eslint.ts.base.json

@@ -7,24 +7,20 @@
     },
     "settings": {
         "react": {
-            "createClass": "createReactClass",
-            "pragma": "createElement",
             "version": "detect"
         }
     },
     "extends": [
         "eslint:recommended",
         "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
         "plugin:@typescript-eslint/recommended",
         "prettier",
         "plugin:prettier/recommended",
         "plugin:react-hooks/recommended"
     ],
     "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",

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" }]]
                     }
                 ]
             }),

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" }]]
                     }
                 ]
             }),

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"

packages/pluggable-widgets-tools/test-config/jest-svg-transformer.js

@@ -12,7 +12,7 @@ module.exports = {
             .join('');
 
         return {
-          code: `
+            code: `
 const React = require('react');
 function ${name}(props) {
   return React.createElement(

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" }]
     ]
 });