Pluggable widget import leading to non-descriptive error

0
I am in the process of creating a new pluggable widget, but can’t figure out how to solve this error. I’ve been able to determine that it’s an import of a library that’s causing the issue, but I have no clue how to resolve it. What I’m trying to do: I’m trying to create a pluggable widget for intro.js (https://introjs.com/), which is an guidance library that allows you to create app guidance flows throughout your app. In this case I’m trying to use the React wrapper of this library intro.js-react (https://www.npmjs.com/package/intro.js-react).  When I include the library with: import { Steps } from 'intro.js-react'; import 'intro.js/introjs.css'; I see this in the UI, where the widget should be: Unknown widget 'XXX.YYY.AppGuideWidget'. And I see two relatively non descriptive errors in the console: Error 1: mxui.js?637865856228721206:66 Error: factoryThrew at d (mxui.js?637865856228721206:5:553) at mxui.js?637865856228721206:5:9535 at Me (mxui.js?637865856228721206:5:9644) at Me (mxui.js?637865856228721206:5:9280) at mxui.js?637865856228721206:5:9835 at Fe (mxui.js?637865856228721206:5:9702) at Be (mxui.js?637865856228721206:5:9774) at i (mxui.js?637865856228721206:5:10909) at HTMLScriptElement.<anonymous> (mxui.js?637865856228721206:5:13143) Error 2: Loading module widgets/xxx/yyy/AppGuideWidget failed! Check script file for syntax errors. If I exclude the import statement the widget works fine. So, somehow including the import statement above leads to Mendix not being able to read the widget. But I have no idea why… Anyone else ever experience this or know how I could get more information that could help me figure this out?
asked
3 answers
0

Did you already work with other library imports before? Are you building the widget in typescript and not seeing any syntax error in the code whilst running from Visual Studio Code?

If the answer on all these tree questions is yes, then this is strange. I have built many custom and Pluggable widgets and loaded many libraries but never saw this. 

The factoryThrew error does ring a bell; in Dojo based widgets this typically occurred when two files from most of the times different widgets conflicted / used the same variable name.

What worked before for me to locate the origin of this type of error was setting the setting ‘bundle widgets when running locally’ to ‘true’ to bundle all widget files to one big JavaScript file (as is done with a normal non local deployment). I believe this is done by webpack. That would then spot the error, which can then be found in a log file which webpack generates and is put in the deployment/ data folder somewhere

Hope this helps!

answered
0

For some reason importing intro.js does work. It seems that it’s the intro.js-react library that leads to the issue. I’m now trying to use that instead and replicating some of the intro.js-react functionality myself. But now I’m running into an issue where I’d like to use a function from react-dom/server (rendertoStaticMarkup), which also seems to lead to import issues. 

I’m using this import statement:

import { renderToStaticMarkup } from 'react-dom/server';

It says:

404 - file not found for file: mxclientsystem/react-dom/server.js

Is it maybe that this isn’t exposed and therefore is leading to issues for both my widget and the use of any library that also uses react-dom/server? Or am I doing something wrong with the import?

answered
0

In the end I ended up building my own widget without the use of the intro.js library or the react-dom/server library. Took some more time, but got what I needed. I did test adding the react-dom/server widget to a new empty widget, which also did not work. So I’ve created a support ticket for that.

answered