Production React build cannot expand elements

[fjmacagno]

I am using the example React approach https://codesandbox.io/s/svelte-jsoneditor-react-59wxz to integrate this into my webapp, and I got it working just fine in my development build:

The truly odd thing is that in my production build sub-objects wont expand:

Neither clicking the arrow by the object nor the expand all option work, but i can see that the data is correct from the text view:

and from the object-editor view:

Im sure this is something wrong with my project setup, but i have no idea how to determine what it is. Any suggestions for what kind of issue could cause this to happen?

svelte-jsoneditor Version: 0.11.5 nodejs version: 16 react version: 16.14.0

[josdejong]

It's hard to tell without being able to reproduce the issue myself.

Some thoughts:

• Are there any console errors that give a hint?
• I see the JSON Editor is opened in a popup. You can try if the issue occurs too when the editor is loaded in the main application instead of a popup.
• Can it be that your web application somehow intercepts events like click and stops them?

[fjmacagno]

Yeah undeniably hard, any suggestions at all are helpful.

• Not a one, alas
• I tried duplicating the editor outside of the popup, and also in the React root object. Both have the same issue.
• It is a pretty simple app, i don't have anything custom that grabs click events, but with the hundreds of nested dependencies i couldn't be certain something else isnt. Nevertheless, the root json triangle does work, even though the child ones do not, so i suspect it isnt a click event issue.

I have inspected the element, and it seems to have the same event handler that the (working) root expand button has. It also appears to be the same across prod and dev, with the only difference being that prod seems to have replaced j with P in

function(e) {
  e.stopPropagation();
  var t = e.ctrlKey;
  P.onExpand(y, !f, t)
}

Is there any form of event logging i could enable even in a production build? It assume there is logic being done further in the internals which decides whether to open the section or not, which perhaps has had its functionality optimized away.

[josdejong]

Is there any form of event logging i could enable even in a production build?

Yes, you can enter localStorage.debug="jsoneditoronline:*" in your developer console and then refresh the application. When clicking an expand button, you should see two log lines:

jsoneditor:TreeMode handleMouseDown ...
jsoneditor:TreeMode expand ...

Is it possible to share a minimal version of your application demonstrating the problem? I.e. clear everything from the application until the JSONEditor is left.

[fjmacagno]

Excellent, so every time i click one of the arrows it logs the same thing:

jsoneditor:TreeMode expand > Object { path: (1) […], expanded: true, recursive: false }
​
expanded: true
path: Array [ "init_data" ]
recursive: false
<prototype>: Object { … }

Subsequent presses do not change the value of expanded; every time it is true. As opposed to the working root button, which toggles expanded between true and false. There are no other log messages, so presumably it isn't being called a second time.

I tried for a while to get a codesandbox working, i will take another stab at it.

[fjmacagno]

Ok, i was able to reduce it while still demonstrating the bug. Make sure to use node16. expand_error.tar.gz. Specifically, after extracting run

yarn install --production
yarn build
serve -s build

[josdejong]

Thanks, I've tried your demo and I can reproduce the issue. It indeed only occurs in the production bundle, not in development mode. It is a vague problem.

I've created a clean, new react project and copy-pasted your components there, and created a production bundle. No problem then.

I see you're using an old version of React@16.4.0 from 4.5 years ago, Webpack@3.12.0 from 5.5 years ago, and Babel@6.26.3 from 4.5 years ago. It can very well be that the issue magically disappears after upgrading your dependencies.

[fjmacagno]

Alas, i was worried you would say that. It is an old, unmaintained yet critical project. I will try to recreate the project and see what happens.

[josdejong]

👍

It is an old, unmaintained yet critical project

The combination of "critical" and "unmaintained" sounds scary 😱

[fjmacagno]

Yeah, it isn't the best. However, as predicted rebuilding the project in react18+node18 (and recreating the project structure from scratch with create-react-app) has fixed the problem. Thanks for all the help!

[josdejong]

That is great news! I hope it wasn't to much of an headache upgrading everything but I'm sure it will be worth it.