Fork me on GitHub
#reagent
<
2022-03-08
>
Ben Halton16:03:46

not sure the best channel to post this so apologies if not relevant. I've upgraded from react 16 -> 17 which is required by mui5. This works but the warning messages from react in dev have become a bit useless. So once I would have had a stack with some of my code in it. Now I get:

Warning: validateDOMNesting(...): <li> cannot appear as a descendant of <li>.
    at li
    at li
    at ul
    at cmp ()
    at div
    at eval ()
    at eval ()
    at div
    at eval ()
    at eval ()
    at div
    at eval ()
    at eval ()
    at div
    at eval ()
    at eval ()
    at div
    at div
    at eval ()
    at div
    at eval ()
    at div
    at eval ()
    at Transition ()
    at eval ()
    at div
    at eval ()
    at eval ()
    at eval ()
    at eval ()
    at cmp ()
    at cmp ()
    at div
    at eval ()
    at eval ()
    at cmp ()
    at cmp ()
    at cmp ()
    at div
    at eval ()
    at eval ()
    at CssBaseline ()
    at div
    at eval ()
    at eval ()
    at InnerThemeProvider ()
    at ThemeProvider ()
    at ThemeProvider ()
    at cmp ()
    at cmp ()
    at cmp ()
which isn't very helpful. Anyone else seen this? Is there a compiler config I'm missing?

p-himik17:03:31

You aren't missing anything. The cmp instead of the real component name is because you're using the latest release of Reagent which is, frankly, quite old. The issue is fixed by this commit https://github.com/reagent-project/reagent/commit/94d258b8ffd43d9a5c3d3a8d8da4b4ea74fea932 but it hasn't been released yet. And regarding the "li within li" stuff - that's just an error you have to fix. Despite the warning, the DOM tree should still have those nested tags, and you can easily find them in your browser's DevTools by executing document.querySelectorAll('li li') in the Console tab.

Ben Halton17:03:44

hi yes thanks totally accept the error is mine - just a pita to track these warnings down without a bit more guidance

Ben Halton17:03:57

I'll roll back to react 16 for now

p-himik17:03:10

Don't. Fix the warning instead. It still is a bad thing, just hiding the warning is not a soluiton.

p-himik17:03:34

I'm 90% certain that the older version of React produced the same exact DOM and just didn't warn about nested <li> tags.

p-himik17:03:43

Also, you can use Reagent from Git, without waiting for a release - then the warning should be a bit more clear.

Ben Halton18:03:11

sorry - the warning was there before - it's just teh error message told me where

Ben Halton18:03:24

whereas in 17 it doesn't

Ben Halton18:03:45

there's quite a few errors that need fixing so I'll use 16 to help me locate them

p-himik18:03:41

How does the above warning look in React 16?

juhoteperi08:03:58

With the Reagent change: I'll try to remember what is the reason we don't get line info for those cljs components.

juhoteperi08:03:05

Or the real info. We get the line in reagent.impl.component, not the real line. Not sure if anything can be done to fix that though.

p-himik08:03:49

The line number could be made a part of the component name. But I doubt that would be useful - the component name already has enough information IMO.

p-himik08:03:03

This is not a stacktrace after all - it's a tree path.

juhoteperi08:03:19

We don't have the line number available here, it would be in a macro, not in a function.

p-himik08:03:27

Ah, right, of course. So it's not only not that useful, but also is unfeasible. :)

juhoteperi08:03:28

But yeah, looks like devtools isn't even trying to use source maps for these messages to resolve that file/line info

juhoteperi08:03:07

It might be possible if we can tell React to use the info from the original function, instead of the Component instance we create on impl.component namespace.

p-himik08:03:40

Even if source maps were used - it would still land you deep inside Reagent implementation and not where the component was used. React errors might point you to the specific file and line number for a particular component, but not all components, far from it. Which isn't that useful given that in Reagent the component name is an FQN - you know exactly where it is, unless you decide to create multiple components with the same exact name. React itself doesn't tell you which <div> exactly that one is among many that a component might have, so I doubt Reagent can do anything here. Apart from switching to macros or parsing CLJS sources and emitting its own errors/warnings.

p-himik08:03:09

An example of a similar React warning, so visualize what I'm talking about.

juhoteperi08:03:32

React gets the line information by trying to construct the given class (or call the function), with a specific value which causes exception. Then it can check the Error information to get the information.

p-himik08:03:05

Mmm, isn't it a problematic approach for the cases when constructing the class or calling the function has side effects?

juhoteperi08:03:21

Maybe it does something a bit different

juhoteperi08:03:40

I don't quite understand what the fn parameter is

juhoteperi09:03:12

At least on the Class case, construct is called with a wrong "Fake" class prototype, so I think in that case the construct call doesn't do anything

Ben Halton09:03:39

react_devtools_backend.js:4061 Warning: validateDOMNesting(...): <li> cannot appear as a descendant of <li>.
    in li (created by ui.views.components.validation_list)
    in li (created by ui.views.components.validation_list)
    in ul (created by ui.views.components.validation_list)
    in ui.views.components.validation_list (created by ui.views.race.results_warnings.render)
  
and as we go further down, more and more info about my code in the "stack"

Ben Halton09:03:13

sorry to jump in to your discussion I'm mainly afk today

juhoteperi09:03:22

Do you have two messages in the console about the problem?

Ben Halton09:03:13

I can only see one (in react 16)

juhoteperi09:03:33

Up to 1.0.0 Reagent did some of its own error reporting, which caused duplicate reports in some cases. In 1.1.0 I removed that as I think the React errors should now provide the same info.

juhoteperi09:03:51

But I think it didn't affect these Warnings

juhoteperi09:03:32

Okay, doesn't seem to be feasible to fix the file/line info. But 1.1.1 is now released with the proper component names in component stacks.

🎉 3
1
Ben Halton13:03:47

that's great I'll upgrade react / reagent tomorrow and try it out

juhoteperi09:03:32
replied to a thread:not sure the best channel to post this so apologies if not relevant. I've upgraded from react 16 -> 17 which is required by mui5. This works but the warning messages from react in dev have become a bit useless. So once I would have had a stack with some of my code in it. Now I get: Warning: validateDOMNesting(...): &lt;li&gt; cannot appear as a descendant of &lt;li&gt;. at li at li at ul at cmp (<http://localhost:8280/js/compiled/cljs-runtime/reagent.impl.component.js:499:43>) at div at eval (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$emotion$react$dist$emotion_element_cbed451f_browser_esm.js:6:408>) at eval (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$mui$system$esm$createBox.js:3:515>) at div at eval (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$emotion$react$dist$emotion_element_cbed451f_browser_esm.js:6:408>) at eval (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$mui$material$Grid$Grid.js:14:443>) at div at eval (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$emotion$react$dist$emotion_element_cbed451f_browser_esm.js:6:408>) at eval (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$mui$material$Grid$Grid.js:14:443>) at div at eval (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$emotion$react$dist$emotion_element_cbed451f_browser_esm.js:6:408>) at eval (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$mui$material$AccordionDetails$AccordionDetails.js:5:354>) at div at div at eval (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$emotion$react$dist$emotion_element_cbed451f_browser_esm.js:6:408>) at div at eval (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$emotion$react$dist$emotion_element_cbed451f_browser_esm.js:6:408>) at div at eval (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$emotion$react$dist$emotion_element_cbed451f_browser_esm.js:6:408>) at Transition (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$mui$material$node_modules$react_transition_group$esm$Transition.js:3:387>) at eval (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$mui$material$Collapse$Collapse.js:9:154>) at div at eval (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$emotion$react$dist$emotion_element_cbed451f_browser_esm.js:6:408>) at eval (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$mui$material$Paper$Paper.js:7:378>) at eval (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$emotion$react$dist$emotion_element_cbed451f_browser_esm.js:6:408>) at eval (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$mui$material$Accordion$Accordion.js:10:178>) at cmp (<http://localhost:8280/js/compiled/cljs-runtime/reagent.impl.component.js:499:43>) at cmp (<http://localhost:8280/js/compiled/cljs-runtime/reagent.impl.component.js:499:43>) at div at eval (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$emotion$react$dist$emotion_element_cbed451f_browser_esm.js:6:408>) at eval (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$mui$system$esm$createBox.js:3:515>) at cmp (<http://localhost:8280/js/compiled/cljs-runtime/reagent.impl.component.js:499:43>) at cmp (<http://localhost:8280/js/compiled/cljs-runtime/reagent.impl.component.js:499:43>) at cmp (<http://localhost:8280/js/compiled/cljs-runtime/reagent.impl.component.js:499:43>) at div at eval (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$emotion$react$dist$emotion_element_cbed451f_browser_esm.js:6:408>) at eval (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$mui$system$esm$createBox.js:3:515>) at CssBaseline (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$mui$material$CssBaseline$CssBaseline.js:2:27>) at div at eval (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$emotion$react$dist$emotion_element_cbed451f_browser_esm.js:6:408>) at eval (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$mui$material$Container$Container.js:7:492>) at InnerThemeProvider (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$mui$system$esm$ThemeProvider$ThemeProvider.js:2:22>) at ThemeProvider (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$mui$private_theming$ThemeProvider$ThemeProvider.js:1:538>) at ThemeProvider (<http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$mui$system$esm$ThemeProvider$ThemeProvider.js:2:190>) at cmp (<http://localhost:8280/js/compiled/cljs-runtime/reagent.impl.component.js:499:43>) at cmp (<http://localhost:8280/js/compiled/cljs-runtime/reagent.impl.component.js:499:43>) at cmp (<http://localhost:8280/js/compiled/cljs-runtime/reagent.impl.component.js:499:43>) which isn't very helpful. Anyone else seen this? Is there a compiler config I'm missing?

Okay, doesn't seem to be feasible to fix the file/line info. But 1.1.1 is now released with the proper component names in component stacks.

🎉 3
1