Final bundled js has constants in global scope, causing conflict

[vietduc1441]

I am using this version of widget tools, but i believe the same situation happens with other newer version too
"@mendix/pluggable-widgets-tools": "^9.24.1",

What happens:

• when i build widget by using npm run release
• if the souce is

import { ReactElement, createElement } from "react";
export interface HelloWorldSampleProps {
sampleText?: string;
}

export function HelloWorldSample(props: HelloWorldSampleProps): ReactElement {
const { sampleText, ...rest } = props;
console.log("rest", rest);
return

Hello {sampleText}

;
}

• The final widgetname.js will be like this:

const _excluded = ["sampleText"];

function _objectWithoutProperties(e, t) {
if (null == e) return {};
var r, o, n = _objectWithoutPropertiesLoose(e, t);
if (Object.getOwnPropertySymbols) {
var l = Object.getOwnPropertySymbols(e);
for (o = 0; o < l.length; o++) r = l[o], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (n[r] = e[r])
}
return n
}

function _objectWithoutPropertiesLoose(e, t) {
if (null == e) return {};
var r = {};
for (var o in e)
if ({}.hasOwnProperty.call(e, o)) {
if (-1 !== t.indexOf(o)) continue;
r[o] = e[o]
} return r
}
define(["exports", "react"], function(e, t) {
"use strict";

function r(e) {
    const r = e.sampleText,
        o = _objectWithoutProperties(e, _excluded);
    return console.log("rest", o), t.createElement("div", {
        className: "widget-hello-world"
    }, "Hello ", r)
}
e.TestWidget = function(e) {
    let o = e.sampleText;
    return t.createElement(r, {
        sampleText: o || "World"
    })
}, Object.defineProperty(e, "__esModule", {
    value: !0
})

});

• And if I have 2 widgets, both has ...rest , i will have this error in console and the second widget is not loaded

mxui.js?639138228211119706:66 [Client] SyntaxError: Identifier '_excluded' has already been declared

mxui.js?639138228211119706:66 [Client] Error: factoryThrew
at d (mxui.js?639138228211119706:5:553)
at mxui.js?639138228211119706:5:9659
at Me (mxui.js?639138228211119706:5:9768)
at mxui.js?639138228211119706:5:9959
at $e (mxui.js?639138228211119706:5:9826)
at Fe (mxui.js?639138228211119706:5:9898)
at r (mxui.js?639138228211119706:5:11033)

• My initial though is that because in both widget, _exclude is generated for rest operator, and then second one cannot be loaded. But i am not sure if this is an issue of mx tools or something in my setup?

[weirdwater]

Hi @vietduc1441, Thanks for reporting this issue. We are able to reproduce the issue with Studio Pro 10.24. We will investigate the appropriate fix for this issue and provide updates here.

Reproduction steps:

• Generate 2 separate widgets and add a spread operation to the widget.
• Create a page in Studio Pro, add the two widgets to the page
• Ensure React Client runtime setting is set to No
• Run the app and open the page

As of this moment we cannot offer a workaround other than recommending to avoid the spread operator. Migrating to the React Client also prevents the issue as it uses ES Modules, but that is not available on Mendix 9.