How to handle missing React internals causing isBatchingLegacy errors with libraries like react-konva in Mendix?

0
I'm trying to implement canvas rendering in a Mendix pluggable widget using react-konva, but I'm getting the error Cannot read properties of undefined (reading 'isBatchingLegacy') at react-reconciler.development.js:17770. This appears to be caused by missing React internals that custom renderer libraries like react-konva depend on.   What I'm Trying to Achieve I'm building a planogram widget that needs to render interactive canvas elements (rectangles, images, text, drag-and-drop functionality). react-konva seemed like the perfect solution since it provides React components that render to HTML5 Canvas via Konva.js.   Root Cause Analysis After investigating, I found that Mendix's React build is missing critical internals: Standard React 18.2:   React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = { ReactCurrentBatchConfig: {...}, ReactCurrentOwner: {...}, ReactCurrentActQueue: {...}, // ← Required by react-reconciler ReactDebugCurrentFrame: {...}, // ← Also missing in Mendix ReactCurrentDispatcher: {...} } Mendix React 18.2.0: React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = { ReactCurrentBatchConfig: {...}, ReactCurrentOwner: {...}, ReactCurrentDispatcher: {...} // Missing: ReactCurrentActQueue, ReactDebugCurrentFrame } The error occurs because react-reconciler tries to access ReactCurrentActQueue.isBatchingLegacy but ReactCurrentActQueue is undefined in Mendix's React build.   Questions Is this a known limitation of Mendix's React build? Are there plans to restore these React internals to support custom renderer libraries? Are there any configuration options to enable full React internals for specific widgets? Environment Details Mendix Version: 10.24 Pluggable Widgets Tools: v10.15.0 react-konva: v18.0.0 konva: v9.2.0 React Version (detected): 18.2.0 (modified by Mendix)
asked
2 answers
1

Hi Arjo, 

 

Thank you for your suggestion!

I tried the recommended approach of setting react-reconciler: "0.29.0" in both resolutions and overrides, but unfortunately, I'm still getting the same `isBatchingLegacy` error. The version alignment didn't resolve the missing React internals issue in my case.

 

However, I did find a working workaround that I wanted to share with the community, along with its important caveats:

 

Working Solution: React Internals Polyfill

I created a polyfill that mocks the missing React internals before react-konva imports:

 

// react-internals-polyfill.js
import React from 'react';

const internals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

if (internals && !internals.ReactCurrentActQueue) {
    internals.ReactCurrentActQueue = {
        isBatchingLegacy: false,
        current: null
    };
}

if (internals && !internals.ReactDebugCurrentFrame) {
    internals.ReactDebugCurrentFrame = {
        getCurrentStack: () => null,
        setCurrentlyValidatingElement: () => {},
        isCurrentlyValidatingElement: () => false
    };
}

Then import this polyfill before importing react-konva:

import "./react-internals-polyfill";  // Apply polyfill first
import { Stage, Layer, Rect } from "react-konva";  // Now works

 

This is definitely a "hack" approach and would have significant drawback like future compatibility risk, and incomplete React behavior since the mock doesn't replicate React's actual batching logic, among other issues.

 

According to this Looks like Mendix React build removes specific internal APIs, and these APIs are required by custom renderer libraries such as `react-konva` .

 

The mocking approach works because it restores the exact React internal structure that react-reconciler expects, bypassing Mendix's intentional modifications to React's internal APIs.

 

best regards, 

Alejandro

answered
0

Hi Alejandro,

 

The version of React that is bundled with the Mendix client is not modified and should allow you to use react-konva. However, a colleague that had experimented with react-konva in the past did mention that for it to work all versions between react and react-konva need to be perfectly aligned.

 

Looking at the package.json's for react-konva and react-reconciler I believe you may have success setting an override/resolution for react-reconciler to 0.29 since it explicitly asks for 18.2.0 and up.

 

Kind regards,

Arjo

answered