"Something went wrong. Please try again!" when opening Custom Field Group

This topic has 5 replies, 2 voices, and was last updated 5 days, 22 hours ago by Michael Kern.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
October 30, 2025 at 8:36 PM #49255

Michael Kern
Participant

On my dev server, everything loads just fine. But when I attempt to edit the same JSON-imported custom field group on my production server, the field group content in the Builder appears then disappears suddenly on pageload and is replaced with the message "Something went wrong. Please try again!"

The field group contains 110 input fields for saving to the database + has tabs, headings, and custom HTML fields.

Query monitor gives no insights. WP Debug log gives no insights.

max_query_vars is set to 100000, and I tested even lower values on my dev server with an identical setup and it works fine. What could be triggering this error? And why doesn't MetaBox print the error output beyond "Something went wrong. Please try again!" What kind of insight am I supposed to derive from that message?

Add New Note to this Reply

October 30, 2025 at 8:53 PM #49256

Michael Kern
Participant

Additional information: it appears its an issue stemming from react-dom.min.js. Chrome DevTools reveals the following:

`
load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils,wp-dom-ready,wp-hooks&ver=6.8.3:5 JQMIGRATE: Migrate is installed, version 3.4.1
deprecated.min.js?ver=e1f84915c5e8ae38964c:2 Bottom margin styles for wp.components.ToggleControl is deprecated since version 6.7 and will be removed in version 7.0. Note: Set the __nextHasNoMarginBottom prop to true to start opting into the new styles, which will become the default in a future version.
i @ deprecated.min.js?ver=e1f84915c5e8ae38964c:2
(anonymous) @ components.min.js?ver=865f2ec3b5f5195705e0:33
ht @ react-dom.min.js?ver=18.3.1.1:10
dr @ react-dom.min.js?ver=18.3.1.1:10
Qs @ react-dom.min.js?ver=18.3.1.1:10
wl @ react-dom.min.js?ver=18.3.1.1:10
bl @ react-dom.min.js?ver=18.3.1.1:10
yl @ react-dom.min.js?ver=18.3.1.1:10
fl @ react-dom.min.js?ver=18.3.1.1:10
Nn @ react-dom.min.js?ver=18.3.1.1:10
pl @ react-dom.min.js?ver=18.3.1.1:10
(anonymous) @ react-dom.min.js?ver=18.3.1.1:10
na @ react-dom.min.js?ver=18.3.1.1:10
e.render @ react-dom.min.js?ver=18.3.1.1:10
(anonymous) @ app.js?ver=3c9de0cd3ba276d675d1:5
(anonymous) @ app.js?ver=3c9de0cd3ba276d675d1:5
(anonymous) @ app.js?ver=3c9de0cd3ba276d675d1:5
react-dom.min.js?ver=18.3.1.1:10 SyntaxError: Failed to execute 'querySelector' on 'Document': '#2__wysiwyg__body_copy' is not a valid selector.
at 4522.app.js:1:670
at Ur (react-dom.min.js?ver=18.3.1.1:10:73201)
at El (react-dom.min.js?ver=18.3.1.1:10:92843)
at fl (react-dom.min.js?ver=18.3.1.1:10:85253)
at Nn (react-dom.min.js?ver=18.3.1.1:10:32442)
at react-dom.min.js?ver=18.3.1.1:10:82952
ar @ react-dom.min.js?ver=18.3.1.1:10
a.componentDidCatch.t.callback @ react-dom.min.js?ver=18.3.1.1:10
at @ react-dom.min.js?ver=18.3.1.1:10
Jr @ react-dom.min.js?ver=18.3.1.1:10
Zr @ react-dom.min.js?ver=18.3.1.1:10
Gr @ react-dom.min.js?ver=18.3.1.1:10
(anonymous) @ react-dom.min.js?ver=18.3.1.1:10
xl @ react-dom.min.js?ver=18.3.1.1:10
fl @ react-dom.min.js?ver=18.3.1.1:10
Nn @ react-dom.min.js?ver=18.3.1.1:10
(anonymous) @ react-dom.min.js?ver=18.3.1.1:10
react-dom.min.js?ver=18.3.1.1:10 SyntaxError: Failed to execute 'querySelector' on 'Document': '#4a__wysiwyg__body_copy' is not a valid selector.
at 4522.app.js:1:670
at Ur (react-dom.min.js?ver=18.3.1.1:10:73201)
at El (react-dom.min.js?ver=18.3.1.1:10:92843)
at fl (react-dom.min.js?ver=18.3.1.1:10:85253)
at Nn (react-dom.min.js?ver=18.3.1.1:10:32442)
at react-dom.min.js?ver=18.3.1.1:10:82952
ar @ react-dom.min.js?ver=18.3.1.1:10
a.componentDidCatch.t.callback @ react-dom.min.js?ver=18.3.1.1:10
at @ react-dom.min.js?ver=18.3.1.1:10
Jr @ react-dom.min.js?ver=18.3.1.1:10
Zr @ react-dom.min.js?ver=18.3.1.1:10
Gr @ react-dom.min.js?ver=18.3.1.1:10
(anonymous) @ react-dom.min.js?ver=18.3.1.1:10
xl @ react-dom.min.js?ver=18.3.1.1:10
fl @ react-dom.min.js?ver=18.3.1.1:10
Nn @ react-dom.min.js?ver=18.3.1.1:10
(anonymous) @ react-dom.min.js?ver=18.3.1.1:10
react-dom.min.js?ver=18.3.1.1:10 SyntaxError: Failed to execute 'querySelector' on 'Document': '#4f__wysiwyg__intro_body_copy' is not a valid selector.
at 4522.app.js:1:670
at Ur (react-dom.min.js?ver=18.3.1.1:10:73201)
at El (react-dom.min.js?ver=18.3.1.1:10:92843)
at fl (react-dom.min.js?ver=18.3.1.1:10:85253)
at Nn (react-dom.min.js?ver=18.3.1.1:10:32442)
at react-dom.min.js?ver=18.3.1.1:10:82952
ar @ react-dom.min.js?ver=18.3.1.1:10
a.componentDidCatch.t.callback @ react-dom.min.js?ver=18.3.1.1:10
at @ react-dom.min.js?ver=18.3.1.1:10
Jr @ react-dom.min.js?ver=18.3.1.1:10
Zr @ react-dom.min.js?ver=18.3.1.1:10
Gr @ react-dom.min.js?ver=18.3.1.1:10
(anonymous) @ react-dom.min.js?ver=18.3.1.1:10
xl @ react-dom.min.js?ver=18.3.1.1:10
fl @ react-dom.min.js?ver=18.3.1.1:10
Nn @ react-dom.min.js?ver=18.3.1.1:10
(anonymous) @ react-dom.min.js?ver=18.3.1.1:10
react-dom.min.js?ver=18.3.1.1:10 SyntaxError: Failed to execute 'querySelector' on 'Document': '#5c__wysiwyg__body_copy' is not a valid selector.
at 4522.app.js:1:670
at Ur (react-dom.min.js?ver=18.3.1.1:10:73201)
at El (react-dom.min.js?ver=18.3.1.1:10:92843)
at fl (react-dom.min.js?ver=18.3.1.1:10:85253)
at Nn (react-dom.min.js?ver=18.3.1.1:10:32442)
at react-dom.min.js?ver=18.3.1.1:10:82952
ar @ react-dom.min.js?ver=18.3.1.1:10
a.componentDidCatch.t.callback @ react-dom.min.js?ver=18.3.1.1:10
at @ react-dom.min.js?ver=18.3.1.1:10
Jr @ react-dom.min.js?ver=18.3.1.1:10
Zr @ react-dom.min.js?ver=18.3.1.1:10
Gr @ react-dom.min.js?ver=18.3.1.1:10
(anonymous) @ react-dom.min.js?ver=18.3.1.1:10
xl @ react-dom.min.js?ver=18.3.1.1:10
fl @ react-dom.min.js?ver=18.3.1.1:10
Nn @ react-dom.min.js?ver=18.3.1.1:10
(anonymous) @ react-dom.min.js?ver=18.3.1.1:10
react-dom.min.js?ver=18.3.1.1:10 SyntaxError: Failed to execute 'querySelector' on 'Document': '#6a__wysiwyg__body_copy' is not a valid selector.
at 4522.app.js:1:670
at Ur (react-dom.min.js?ver=18.3.1.1:10:73201)
at El (react-dom.min.js?ver=18.3.1.1:10:92843)
at fl (react-dom.min.js?ver=18.3.1.1:10:85253)
at Nn (react-dom.min.js?ver=18.3.1.1:10:32442)
at react-dom.min.js?ver=18.3.1.1:10:82952
ar @ react-dom.min.js?ver=18.3.1.1:10
a.componentDidCatch.t.callback @ react-dom.min.js?ver=18.3.1.1:10
at @ react-dom.min.js?ver=18.3.1.1:10
Jr @ react-dom.min.js?ver=18.3.1.1:10
Zr @ react-dom.min.js?ver=18.3.1.1:10
Gr @ react-dom.min.js?ver=18.3.1.1:10
(anonymous) @ react-dom.min.js?ver=18.3.1.1:10
xl @ react-dom.min.js?ver=18.3.1.1:10
fl @ react-dom.min.js?ver=18.3.1.1:10
Nn @ react-dom.min.js?ver=18.3.1.1:10
(anonymous) @ react-dom.min.js?ver=18.3.1.1:10
react-dom.min.js?ver=18.3.1.1:10 TypeError: Cannot read properties of null (reading 'removeEventListener')
at A.hasUnsavedChanges (app.js?ver=3c9de0cd3ba276d675d1:1:243430)
at Or (react-dom.min.js?ver=18.3.1.1:10:72846)
at Ir (react-dom.min.js?ver=18.3.1.1:10:73032)
at El (react-dom.min.js?ver=18.3.1.1:10:92118)
at fl (react-dom.min.js?ver=18.3.1.1:10:85253)
at Nn (react-dom.min.js?ver=18.3.1.1:10:32442)
at react-dom.min.js?ver=18.3.1.1:10:82952
ar @ react-dom.min.js?ver=18.3.1.1:10
a.componentDidCatch.t.callback @ react-dom.min.js?ver=18.3.1.1:10
at @ react-dom.min.js?ver=18.3.1.1:10
Jr @ react-dom.min.js?ver=18.3.1.1:10
Zr @ react-dom.min.js?ver=18.3.1.1:10
Gr @ react-dom.min.js?ver=18.3.1.1:10
(anonymous) @ react-dom.min.js?ver=18.3.1.1:10
xl @ react-dom.min.js?ver=18.3.1.1:10
fl @ react-dom.min.js?ver=18.3.1.1:10
Nn @ react-dom.min.js?ver=18.3.1.1:10
(anonymous) @ react-dom.min.js?ver=18.3.1.1:10
`

Add New Note to this Reply

October 30, 2025 at 8:58 PM #49257

Michael Kern
Participant

Here's the output in Pastebin for better viewing. Password is pvARzMRnji

Add New Note to this Reply

October 30, 2025 at 10:08 PM #49258

Michael Kern
Participant

Turns out that the reason this was happening was that I began my ID strings with a numeric character which creates an issue where React cannot target anchor tags beginning with a number. Once I added an alphabetical character to begin the string, the problem was solved and everything worked as expected. PROBLEM SOLVED

Add New Note to this Reply

October 31, 2025 at 2:28 PM #49261

Peter
Moderator

Hello Michael,

Thanks for reaching out.

Can you please share a screenshot of the issue or steps to reproduce it? I will forward the issue to the development team to see if we can improve something on our side.

Add New Note to this Reply

November 2, 2025 at 11:09 PM #49270

Michael Kern
Participant

Steps to reproduce: import a field list via mb-json folder. Field list must have fields beginning with a numeric character. It helps if there's a lot of them. Then, when you Edit the field group, it should flash the content before replacing the content with a blank page reading "Something went wrong. Please try again!" If you open up Chrome DevTools, you'll see that what's happening is that the react js is attempting to target fields by their CSS ID selectors, but CSS IDs that begin with a number must be escaped. Since I began my field IDs with a number, the react js had issues targeting these fields' CSS IDs since it wasn't properly escaping them, causing the error.

Add New Note to this Reply
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.