srieger1
commented
6 months ago As I saw the warnings and briefly tried to track them down, I had the impression that they came from monaco, but it would be a relief, if this is not the case, as updating monaco to the most recent version does not seam to be advisable, since other major projects like monaco-languageclient, y-monaco also lock it to 0.33.
Would be really great if it would be fixable by changing TerminalTabs etc. as you mentioned because the warnings were really nasty during implementation of yjs and websocket keep-alive. Filtering warnings during the development process was also not a good idea...
Tomtec331
Currently react throws warnings because of unrecognized props on a DOM element when visiting the Environment view.
Show react warnings
Warning: React does not recognize the `fullWidth` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `fullwidth` instead. If you accidentally passed it from a parent component, remove it from the DOM element. div ../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:1053:50 Grid2@http://localhost:3000/node_modules/.vite/deps/chunk-IUGYI4SZ.js?v=95b42c59:410:35 div ../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:1053:50 div ../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:1053:50 div ../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:1053:50 Tabs2@http://localhost:3000/node_modules/.vite/deps/chunk-7T5HWMP5.js?v=95b42c59:556:30 TabControl@http://localhost:3000/src/components/TabControl.tsx:59:35 div ../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:1053:50 Grid2@http://localhost:3000/node_modules/.vite/deps/chunk-IUGYI4SZ.js?v=95b42c59:410:35 div ../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:1053:50 Grid2@http://localhost:3000/node_modules/.vite/deps/chunk-IUGYI4SZ.js?v=95b42c59:410:35 EnvironmentView@http://localhost:3000/src/views/Environment.tsx:51:5 C2@http://localhost:3000/node_modules/.vite/deps/chunk-PNJZ32FK.js?v=95b42c59:1956:31 Route2@http://localhost:3000/node_modules/.vite/deps/chunk-PNJZ32FK.js?v=95b42c59:1773:29 PrivateRoute@http://localhost:3000/src/components/PrivateRoute.tsx:19:50 Router2@http://localhost:3000/node_modules/.vite/deps/chunk-PNJZ32FK.js?v=95b42c59:1486:30 BrowserRouter2@http://localhost:3000/node_modules/.vite/deps/react-router-dom.js?v=97d327c4:55:35 ThemeProvider2@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:5629:7 ThemeProvider3@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:5717:7 ThemeProvider@http://localhost:3000/node_modules/.vite/deps/chunk-E7SMDL5H.js?v=95b42c59:305:7 App@http://localhost:3000/src/App.tsx:39:43 react-dom.development.js:86:29 Warning: Received `false` for a non-boolean attribute `indicator`. If you want to write it to the DOM, pass a string instead: indicator="false" or indicator={value.toString()}. If you used to conditionally omit it with indicator={condition && value}, pass indicator={condition ? value : undefined} instead. div ../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:1053:50 Grid2@http://localhost:3000/node_modules/.vite/deps/chunk-IUGYI4SZ.js?v=95b42c59:410:35 div ../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:1053:50 div ../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:1053:50 div ../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:1053:50 Tabs2@http://localhost:3000/node_modules/.vite/deps/chunk-7T5HWMP5.js?v=95b42c59:556:30 TabControl@http://localhost:3000/src/components/TabControl.tsx:59:35 div ../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:1053:50 Grid2@http://localhost:3000/node_modules/.vite/deps/chunk-IUGYI4SZ.js?v=95b42c59:410:35 div ../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:1053:50 Grid2@http://localhost:3000/node_modules/.vite/deps/chunk-IUGYI4SZ.js?v=95b42c59:410:35 EnvironmentView@http://localhost:3000/src/views/Environment.tsx:51:5 C2@http://localhost:3000/node_modules/.vite/deps/chunk-PNJZ32FK.js?v=95b42c59:1956:31 Route2@http://localhost:3000/node_modules/.vite/deps/chunk-PNJZ32FK.js?v=95b42c59:1773:29 PrivateRoute@http://localhost:3000/src/components/PrivateRoute.tsx:19:50 Router2@http://localhost:3000/node_modules/.vite/deps/chunk-PNJZ32FK.js?v=95b42c59:1486:30 BrowserRouter2@http://localhost:3000/node_modules/.vite/deps/react-router-dom.js?v=97d327c4:55:35 ThemeProvider2@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:5629:7 ThemeProvider3@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:5717:7 ThemeProvider@http://localhost:3000/node_modules/.vite/deps/chunk-E7SMDL5H.js?v=95b42c59:305:7 App@http://localhost:3000/src/App.tsx:39:43 react-dom.development.js:86:29 Warning: React does not recognize the `selectionFollowsFocus` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `selectionfollowsfocus` instead. If you accidentally passed it from a parent component, remove it from the DOM element. div ../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:1053:50 Grid2@http://localhost:3000/node_modules/.vite/deps/chunk-IUGYI4SZ.js?v=95b42c59:410:35 div ../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:1053:50 div ../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:1053:50 div ../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:1053:50 Tabs2@http://localhost:3000/node_modules/.vite/deps/chunk-7T5HWMP5.js?v=95b42c59:556:30 TabControl@http://localhost:3000/src/components/TabControl.tsx:59:35 div ../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:1053:50 Grid2@http://localhost:3000/node_modules/.vite/deps/chunk-IUGYI4SZ.js?v=95b42c59:410:35 div ../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:1053:50 Grid2@http://localhost:3000/node_modules/.vite/deps/chunk-IUGYI4SZ.js?v=95b42c59:410:35 EnvironmentView@http://localhost:3000/src/views/Environment.tsx:51:5 C2@http://localhost:3000/node_modules/.vite/deps/chunk-PNJZ32FK.js?v=95b42c59:1956:31 Route2@http://localhost:3000/node_modules/.vite/deps/chunk-PNJZ32FK.js?v=95b42c59:1773:29 PrivateRoute@http://localhost:3000/src/components/PrivateRoute.tsx:19:50 Router2@http://localhost:3000/node_modules/.vite/deps/chunk-PNJZ32FK.js?v=95b42c59:1486:30 BrowserRouter2@http://localhost:3000/node_modules/.vite/deps/react-router-dom.js?v=97d327c4:55:35 ThemeProvider2@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:5629:7 ThemeProvider3@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:5717:7 ThemeProvider@http://localhost:3000/node_modules/.vite/deps/chunk-E7SMDL5H.js?v=95b42c59:305:7 App@http://localhost:3000/src/App.tsx:39:43 react-dom.development.js:86:29 Warning: React does not recognize the `textColor` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `textcolor` instead. If you accidentally passed it from a parent component, remove it from the DOM element. div ../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:1053:50 Grid2@http://localhost:3000/node_modules/.vite/deps/chunk-IUGYI4SZ.js?v=95b42c59:410:35 div ../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:1053:50 div ../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:1053:50 div ../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:1053:50 Tabs2@http://localhost:3000/node_modules/.vite/deps/chunk-7T5HWMP5.js?v=95b42c59:556:30 TabControl@http://localhost:3000/src/components/TabControl.tsx:59:35 div ../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:1053:50 Grid2@http://localhost:3000/node_modules/.vite/deps/chunk-IUGYI4SZ.js?v=95b42c59:410:35 div ../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js/withEmotionCache2/<@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:1053:50 Grid2@http://localhost:3000/node_modules/.vite/deps/chunk-IUGYI4SZ.js?v=95b42c59:410:35 EnvironmentView@http://localhost:3000/src/views/Environment.tsx:51:5 C2@http://localhost:3000/node_modules/.vite/deps/chunk-PNJZ32FK.js?v=95b42c59:1956:31 Route2@http://localhost:3000/node_modules/.vite/deps/chunk-PNJZ32FK.js?v=95b42c59:1773:29 PrivateRoute@http://localhost:3000/src/components/PrivateRoute.tsx:19:50 Router2@http://localhost:3000/node_modules/.vite/deps/chunk-PNJZ32FK.js?v=95b42c59:1486:30 BrowserRouter2@http://localhost:3000/node_modules/.vite/deps/react-router-dom.js?v=97d327c4:55:35 ThemeProvider2@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:5629:7 ThemeProvider3@http://localhost:3000/node_modules/.vite/deps/chunk-FFAYW3TL.js?v=95b42c59:5717:7 ThemeProvider@http://localhost:3000/node_modules/.vite/deps/chunk-E7SMDL5H.js?v=95b42c59:305:7 App@http://localhost:3000/src/App.tsx:39:43This happens (hopefully?) because of the "TerminalTabs" and/or "TabControl" components. Both use the "Tabs" component of MUI. The problem here is that the children should only be "Tab" components. Currently Grids, Buttons, Icons and so on are used too which is most likely the culprit as the props of the parent "Tabs" element are copied onto its children (which are unknown to these components).
Heres a related issue from the MUI repository: https://github.com/mui/material-ui/issues/38516 Position of the first misplaced element: https://github.com/prona-p4-learning-platform/learn-sdn-hub/blob/775e5729470f5411133981ea4cdabc7506c6f968/frontend/src/components/TabControl.tsx#L64 https://github.com/prona-p4-learning-platform/learn-sdn-hub/blob/775e5729470f5411133981ea4cdabc7506c6f968/frontend/src/components/TerminalTabs.tsx#L67