JSONDigger is not defined

[javier-godoy]

trafficstars

Describe the bug

fc-orgchart-styles-DN-_P1bn.js:16 Uncaught (in promise) ReferenceError: JSONDigger is not defined
    at B.dropHandler (fc-orgchart-styles-DN-_P1bn.js:16:40109)
    at HTMLDivElement.dispatch (fc-orgchart-styles-DN-_P1bn.js:13:43325)
    at J.handle (fc-orgchart-styles-DN-_P1bn.js:13:41294)

Expected behavior

No response

Minimal reproducible example

1. Go to https://addonsv24.flowingcode.com/orgchart/drag-and-drop
2. Attempt to drag an item
3. Observe that an error is logged in the browser console

Add-on Version

5.0.1

Vaadin Version

24.4.1

Additional information

No response

[paodb]

JSONDigger is a dependency that was added in the base library since version 3.4.0. I tried to add this dependency in the add-on using @NpmPackage(value = "json-digger", version = "2.0.2") and @JsModule("json-digger/dist/json-digger.js") but that's not enough as the import of JSONDigger object is missing in the core component. Tried adding it in the fc-orgchart.js file but a lot of webpack errors appears when trying to run the demo app in vaadin 14, like If I run profile v24 then I get a different error

One other aproach I tried was to donwgrade the library dependency to one that is not using JsonDigger, like 3.2.0, It works but some styling break on the drag/drog example that would need fixing.

[paodb]

Found this related issue on the original library.

[jxmai]

@paodb It seems we're facing a similar issue due to an upstream dependency. The JSON Digger library was added as a required dependency, but it brought in webpack-related dependencies along with it.

You can see the source here: https://raw.githubusercontent.com/dabeng/json-digger/refs/heads/master/dist/json-digger.js (The JS file is quite large 😅).

Not sure if your situation is better, but for us, we're not using webpack at all, and this has become a blocker for upgrading.

[paodb]

Did some more testing, but no luck yet. There's a newer version, 5.0.0 but issue with JSONDigger dependency still exists. After that first attempt failed, I tried overriding the source code of the version in use (3.7.0) by adding it as add-on resource but, adding import for the JSONDigger library breaks and a lot of webpack errors appear. As mentioned on the previous comment, this library has webpack dependencies that make everything fails. I get a lot of errors similar to this one:

[webpack] ERROR dev-webpack - [91mModule not found: Error: Can't resolve 'module' in 'C:\Development\repositorios\flowing-add-ons\OrgChartAddon\node_modules\webpack\lib\node'[0m
[webpack] ERROR dev-webpack - [91m @ ../node_modules/webpack/lib/node/NodeTargetPlugin.js 11:1-18[0m
[webpack] ERROR dev-webpack - [91m @ ../node_modules/webpack/lib/node sync ^\.\/.*$[0m
[webpack] ERROR dev-webpack - [91m @ ../node_modules/webpack/lib/node/NodeMainTemplate.runtime.js[0m
[webpack] ERROR dev-webpack - [91m @ ../node_modules/webpack/lib/node/NodeMainTemplatePlugin.js[0m
[webpack] ERROR dev-webpack - [91m @ ../node_modules/webpack/lib/node/NodeTemplatePlugin.js[0m
[webpack] ERROR dev-webpack - [91m @ ../node_modules/webpack/lib/webpack.js[0m
[webpack] ERROR dev-webpack - [91m @ ../node_modules/@vaadin/flow-frontend/orgchart/dist/js/jquery.orgchart.js[0m
[webpack] ERROR dev-webpack - [91m @ ../target/frontend/generated-flow-imports.js

Also tried to import the webpack dependency but didn't work either.

Not sure how to move forward with this component. Should we downgrade the orgchart library version as suggested before?