404 - file not found for mxclientsystem/react/jsx-runtime.js

3
Hello,  I have began poking around creating some custom widgets. I managed to get the sample https://docs.mendix.com/howto/extensibility/create-a-pluggable-widget-one#4-read-more working fully. Next, I set out to extend the blank helloworld one by attempting to use Material UI https://mui.com and some of the packages they offer. When I try to import these packages and display a simple contained button seen here https://mui.com/components/buttons/, but am left with some issues that I am hoping are related to my file structure: import { Button  }  from '@mui/material/';     So I bundle ok with no errors, but Mendix hangs due to this error in the console: I am unsure if its my file structure or maybe my lack of knowledge around Mendix widgets.   Here is the file itself in the node_modules in the widget. Maybe I am importing incorrectly or it simply is not possible in this way?
asked
2 answers
5

Update: I guess I cracked the nut. It needs patching of @mendix/pluggable-widgets-tools since it’s related to the roll-up:

[dietmar@imac5k button5] diff node_modules/@mendix/pluggable-widgets-tools/configs/rollup.config.js*
314c314
< const webExternal = [/^mendix($|\/)/, /^react$/, /^react-dom($|\/)/, /^big.js$/];
---
> const webExternal = [/^mendix($|\/)/, /^react($|\/)/, /^react-dom($|\/)/, /^big.js$/];
316c316
< const editorPreviewExternal = [/^mendix($|\/)/, /^react$/, /^react-dom($|\/)/];
---
> const editorPreviewExternal = [/^mendix($|\/)/, /^react($|\/)/, /^react-dom($|\/)/];
318c318
< const editorConfigExternal = [/^mendix($|\/)/, /^react$/, /^react-dom($|\/)/];
---
> const editorConfigExternal = [/^mendix($|\/)/, /^react($|\/)/, /^react-dom($|\/)/];
[dietmar@imac5k button5]

I guess next step would be that someone verifies. And if it’s fine we should suggest “that” change to Mendix team.

Hi, 

I’m still trying to find a workaround. But I think the issue is that mxui.js doesn’t expose react/jsx-runtime. I maybe complete wrong though. (I didn’t really wrap my head around regarding this module stuff in JS.)

 

react/jsx-runtime is present in mxui.js though:

So we just need to find a way to register it. At least that’s what I think.

Yes, doing solves the 404, etc.

I just need to find the reference to react/jsx-runtime module. (V is wrong, that’s react.)

But I guess without help from Mendix it’s a dead-end. :(

Linking similar question: https://forum.mendix.com/link/questions/112745 and https://stackoverflow.com/questions/70860036/how-to-fix-error-when-rollup-cannot-resolve-dependency

answered
0

I am struggling with a similar problem. Testwise I installed MUI library via npm and included the component via

import { Chip as MuiChip } from "@mui/material";

The import itself doesn’t make any problems. But as soon as I include the MuiChip component in my code, I get the same errors as Millon.

A console.log gives me an empty array, respectively an empty object:

Fetching object using microflow 'MyFirstModule.DSS_CreateTestObject' for widget MyFirstModule.Home_Web.dataView1 parameter mapping: 
Object {  }

Received object '4503599627373109' and 0 objects over schema for widget MyFirstModule.Home_Web.dataView1 extra ids 
Array []

Mui seems to be installed correctly though.

Any help is appreciated.

 

** Edit **

Btw, this is the corresponding log-file

2022-03-28 09:18:15.2375 ERROR Mendix.Modeler.Microflows.View.Debugger.DebuggerUI Debugging was disconnected.
System.Net.Http.HttpRequestException: An error occurred while sending the request.
 ---> System.IO.IOException: The response ended prematurely.
   at System.Net.Http.HttpConnection.SendAsyncCore(HttpRequestMessage request, Boolean async, CancellationToken cancellationToken)
   --- End of inner exception stack trace ---
   at System.Net.Http.HttpConnection.SendAsyncCore(HttpRequestMessage request, Boolean async, CancellationToken cancellationToken)
   at System.Net.Http.HttpConnectionPool.SendWithVersionDetectionAndRetryAsync(HttpRequestMessage request, Boolean async, Boolean doRequestAuth, CancellationToken cancellationToken)
   at System.Net.Http.RedirectHandler.SendAsync(HttpRequestMessage request, Boolean async, CancellationToken cancellationToken)
   at Mendix.Modeler.Utility.TimeoutHandler.SendAsync(HttpRequestMessage request, CancellationToken cancellationToken) in C:\Users\Autobuild\workspace\AppStudio4.0-Build\modeler\Mendix.Modeler.Utility\Network\TimeoutHandler.cs:line 30
   at System.Net.Http.HttpClient.<SendAsync>g__Core|83_0(HttpRequestMessage request, HttpCompletionOption completionOption, CancellationTokenSource cts, Boolean disposeCts, CancellationTokenSource pendingRequestsCts, CancellationToken originalCancellationToken)
   at Mendix.Modeler.Microflows.Debugger.DebuggerClient.MakeDebuggerWebRequest(DebuggerRequest debugRequest, CancellationToken cancellationToken, Int32 timeout) in C:\Users\Autobuild\workspace\AppStudio4.0-Build\modeler\Mendix.Modeler.Core\Microflows\Debugger\DebuggerClient.cs:line 202
   at Mendix.Modeler.Microflows.Debugger.DebuggerClient.StartDebuggerRequest(Boolean forcestart, CancellationToken cancellationToken) in C:\Users\Autobuild\workspace\AppStudio4.0-Build\modeler\Mendix.Modeler.Core\Microflows\Debugger\DebuggerClient.cs:line 215

 

answered