Comments (6)
prolink007
commented on July 22, 2024
1
Hey @prolink007 I cannot reproduce the issue with the given steps. Could you try to replicate this in a stackblitz demo that throws this error more consistently? Or test this a bit more with better steps to reproduce? Thanks!
I provided two links. One is to the documentation. Just follow that link. Click on the stackblitz for the using a dataset section. Let the stack load. Then open inspection. Make sure it is docked to the window. Then start hovering around the data inside the chart. It does not start immediately. You have to do it for a few seconds. Then it will start showing up more frequently.
Here is a screen shot of what i am seeing. I can provide a video, if needed.
from mui-x.
michelengelen
commented on July 22, 2024
Hey @prolink007 I cannot reproduce the issue with the given steps.
Could you try to replicate this in a stackblitz demo that throws this error more consistently?
Or test this a bit more with better steps to reproduce?
Thanks!
from mui-x.
michelengelen
commented on July 22, 2024
Thanks @prolink007 I can reproduce it now.
@JCQuintas I guess this comes from constantly updating the position with translate. WDYT?
from mui-x.
prolink007
commented on July 22, 2024
Thanks @prolink007 I can reproduce it now. @JCQuintas I guess this comes from constantly updating the position with
translate. WDYT?
@michelengelen I can get this to happen on almost all the chart types in my code. I just thought it would be easier to use the stackblitz that was in the documentation to demonstrate. Hope that helps. 🤷
from mui-x.
JCQuintas
commented on July 22, 2024
@michelengelen yeah it seems to be an issue in how we calculate the Popper position. Though it only seems to appear in development, probably because the prod bundle is more optimised.
from mui-x.
JCQuintas
commented on July 22, 2024
Managed to get a more specific error
hydration-error-info.js:50 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
at PopperTooltip (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@mui/base/Popper/Popper.js:72:7)
at Portal (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@mui/base/Portal/Portal.js:39:5)
at Popper (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@mui/base/Popper/Popper.js:203:7)
at eval (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:60:66)
at NoSsr (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@mui/base/NoSsr/NoSsr.js:38:5)
at ChartsTooltip (webpack-internal:///../packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx:74:89)
at svg
at eval (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:60:66)
at ChartsSurface (webpack-internal:///../packages/x-charts/src/ChartsSurface.tsx:33:7)
at HighlightedProvider (webpack-internal:///../packages/x-charts/src/context/HighlightedProvider/HighlightedProvider.tsx:42:3)
at InteractionProvider (webpack-internal:///../packages/x-charts/src/context/InteractionProvider.tsx:69:5)
at CartesianContextProvider (webpack-internal:///../packages/x-charts/src/context/CartesianProvider/CartesianProvider.tsx:26:58)
at CartesianContextProviderReal (webpack-internal:///../packages/x-charts/src/context/CartesianProvider/CartesianProviderPro.tsx:62:12)
at CartesianContextProviderPro (webpack-internal:///../packages/x-charts/src/context/CartesianProvider/CartesianProviderPro.tsx:28:58)
at SeriesContextProvider (webpack-internal:///../packages/x-charts/src/context/SeriesContextProvider.tsx:72:5)
at ColorProvider (webpack-internal:///../packages/x-charts/src/context/ColorProvider.tsx:19:5)
at DrawingProvider (webpack-internal:///../packages/x-charts/src/context/DrawingProvider.tsx:47:5)
at ZoomProviderReal (webpack-internal:///../packages/x-charts/src/context/ZoomProvider/ZoomProvider.tsx:35:3)
at ZoomProvider (webpack-internal:///../packages/x-charts/src/context/ZoomProvider/ZoomProvider.tsx:17:3)
at ChartContainer (webpack-internal:///../packages/x-charts/src/ChartContainer/ChartContainer.tsx:45:5)
at div
at eval (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:60:66)
at ResponsiveChartContainer (webpack-internal:///../packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx:49:14)
at LineChart (webpack-internal:///../packages/x-charts/src/LineChart/LineChart.tsx:59:5)
at div
at eval (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:60:66)
at Box (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]__@emotion+styled_f47ztnatjene6jl3ylt6b3ja6i/node_modules/@mui/system/esm/createBox.js:37:72)
at BarsDataset
at RtlProvider (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]__@emotion+styled_f47ztnatjene6jl3ylt6b3ja6i/node_modules/@mui/system/esm/RtlProvider/index.js:22:7)
at ThemeProvider (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@mui/private-theming/ThemeProvider/ThemeProvider.js:43:5)
at ThemeProvider (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]__@emotion+styled_f47ztnatjene6jl3ylt6b3ja6i/node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:56:5)
at ThemeProvider (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]__@emotion+styl_r36f54zqraypp6ktpuggujlhem/node_modules/@mui/material/styles/ThemeProvider.js:27:14)
at Layout (webpack-internal:///./pages/playground/components/Layout.tsx:55:21)
at Page
at Ge (webpack-internal:///../node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/styled-components/dist/styled-components.browser.esm.js:30:16024)
at StyledEngineProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.github.com+mui+material-ui+tar.gz+f0026ad5bf4e1957cebd65b882bf_7jk4t7vxklzslemzp6cyak4wiu/node_modules/@mui/monorepo/docs/src/modules/utils/StyledEngineProvider.js:40:5)
at CodeVariantProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.github.com+mui+material-ui+tar.gz+f0026ad5bf4e1957cebd65b882bf_7jk4t7vxklzslemzp6cyak4wiu/node_modules/@mui/monorepo/docs/src/modules/utils/codeVariant.js:55:5)
at CodeCopyProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.github.com+mui+material-ui+tar.gz+f0026ad5bf4e1957cebd65b882bf_7jk4t7vxklzslemzp6cyak4wiu/node_modules/@mui/monorepo/packages/mui-docs/src/CodeCopy/CodeCopy.tsx:181:3)
at TranslationsProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.github.com+mui+material-ui+tar.gz+f0026ad5bf4e1957cebd65b882bf_7jk4t7vxklzslemzp6cyak4wiu/node_modules/@mui/monorepo/packages/mui-docs/src/i18n/i18n.tsx:35:3)
at UserLanguageProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.github.com+mui+material-ui+tar.gz+f0026ad5bf4e1957cebd65b882bf_7jk4t7vxklzslemzp6cyak4wiu/node_modules/@mui/monorepo/packages/mui-docs/src/i18n/i18n.tsx:72:5)
at DocsProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.github.com+mui+material-ui+tar.gz+f0026ad5bf4e1957cebd65b882bf_7jk4t7vxklzslemzp6cyak4wiu/node_modules/@mui/monorepo/packages/mui-docs/src/DocsProvider/DocsProvider.tsx:19:3)
at AppWrapper (webpack-internal:///./pages/_app.js:182:5)
at MyApp (webpack-internal:///./pages/_app.js:403:5)
at PathnameContextProviderAdapter (webpack-internal:///../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected]_react-dom@18._743tn77mfn3mep2oufb5dpzqoy/node_modules/next/dist/shared/lib/router/adapters.js:89:7)
at ErrorBoundary (webpack-internal:///../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected]_react-dom@18._743tn77mfn3mep2oufb5dpzqoy/node_modules/next/dist/client/components/react-dev-overlay/pages/ErrorBoundary.js:43:5)
at ReactDevOverlay (webpack-internal:///../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected]_react-dom@18._743tn77mfn3mep2oufb5dpzqoy/node_modules/next/dist/client/components/react-dev-overlay/pages/ReactDevOverlay.js:34:5)
at Container (webpack-internal:///../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected]_react-dom@18._743tn77mfn3mep2oufb5dpzqoy/node_modules/next/dist/client/index.js:80:1)
at AppContainer (webpack-internal:///../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected]_react-dom@18._743tn77mfn3mep2oufb5dpzqoy/node_modules/next/dist/client/index.js:191:5)
at Root (webpack-internal:///../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected]_react-dom@18._743tn77mfn3mep2oufb5dpzqoy/node_modules/next/dist/client/index.js:423:5)
console.error @ hydration-error-info.js:50
window.console.error @ setup-hydration-warning.js:16
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
checkForNestedUpdates @ react-dom.development.js:27295
scheduleUpdateOnFiber @ react-dom.development.js:25470
dispatchSetState @ react-dom.development.js:17527
handlePopperUpdate @ Popper.js:119
fn @ Popper.js:146
forceUpdate @ createPopper.js:143
eval @ Popper.js:106
commitHookEffectListMount @ react-dom.development.js:23145
commitPassiveMountOnFiber @ react-dom.development.js:24921
commitPassiveMountEffects_complete @ react-dom.development.js:24886
commitPassiveMountEffects_begin @ react-dom.development.js:24873
commitPassiveMountEffects @ react-dom.development.js:24861
flushPassiveEffectsImpl @ react-dom.development.js:27034
flushPassiveEffects @ react-dom.development.js:26979
eval @ react-dom.development.js:26764
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
from mui-x.
Related Issues (20)
- [data grid] CSV export adds malformed/buggy characters HOT 2
- [TreeView] Expose the item slots at the tree view level
- [data grid] Is Clipboard cut available? HOT 1
- [data grid] Save / Restore state with dynamic columns HOT 1
- [pickers] dayjs with default timezone broke picker HOT 2
- [pickers] Page fails to load Date Picker Component with Joy UI using CssVarsProvider Wrapper HOT 5
- [charts] Improve default color contrast in dark mode HOT 5
- [RFC] Move to a more modular structure for tests in code and CI HOT 2
- Add Audio Player/Waveform component HOT 2
- [charts] Cannot scroll the page when touch inside the chart HOT 4
- [data grid] Pivoting ETA HOT 4
- Pie Chart shows a slice for 0 value whenever the object representing a 0 is last in the array HOT 2
- [DataGrid] CSV export negative numbers in string has quotation HOT 3
- [data grid] Is there a way to override the default copy/paste functionality in DataGrid? HOT 3
- New sets of components HOT 2
- [charts] BarChart legend overlaps charts area HOT 2
- [pickers] Recipes
- [data grid] I want to add Apply and Cancel buttons to the GridToolbarFilterButton HOT 2
- [pickers][DateTimeRangePicker] Manually selecting the date then selecting the time in the popover reverts the date to today HOT 1
- [charts] Support single color area chart HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-x.