search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
94.03k stars 32.3k forks source link

mui.com documentation imploded "Cannot read properties of undefined (reading 'type')" #30562

Closed AlbinoGeek closed 2 years ago

AlbinoGeek commented 2 years ago

Probably reported to the wrong place, for that I apologize.

Duplicates

Latest version

Current behavior ๐Ÿ˜ฏ

https://mui.com/components/text-fields/#main-content implodes.

image

Expected behavior ๐Ÿค”

It was working half an hour ago.

Steps to reproduce ๐Ÿ•น

Steps:

  1. Go to https://mui.com/components/text-fields/#main-content
  2. Wait until hydration begins.
  3. Observe error

Context ๐Ÿ”ฆ

No response

Your environment ๐ŸŒŽ

`Browser` `Google Chrome Version 96.0.4664.45 (Official Build) (64-bit)`
`OS` `Fedora 34 (Thirty Four) with kernel 5.14.18-200.fc34.x86_64 #1 SMP Fri Nov 12 16:48:10 UTC 2021`
AlbinoGeek commented 2 years ago

This appears to have now been fixed. I wonder what happened?

rhettl commented 2 years ago

I am still getting this error, but on anything involving DataGrid, ex: https://mui.com/components/data-grid/columns/

MacOS 11.6 Chrome 97.0.4692.71

AlbinoGeek commented 2 years ago

Reopened as the issue has come back, and I'm not the only person with it.

mnajdova commented 2 years ago

@DanailH could you check? I cannot repro on Windows.

AlbinoGeek commented 2 years ago

Repro on Fedora 35 Workstation with Gnome 41 (default DE) up-to-date

Same as above, happens much more often on the data table pages then other pages of the documentation.

On Mon., Jan. 24, 2022, 12:32 a.m. Marija Najdova, @.***> wrote:

@DanailH https://github.com/DanailH could you check? I cannot repro on Windows.

โ€” Reply to this email directly, view it on GitHub https://github.com/mui-org/material-ui/issues/30562#issuecomment-1019841486, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAOSNPPB3R4DL2QHHPTIIILUXUFBXANCNFSM5LSPIQVA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you modified the open/close state.Message ID: @.***>

michaldudak commented 2 years ago

@AlbinoGeek does it still occur for you? I wasn't able to reproduce it even once. Make sure to clear your browser's cache and storage.

rhettl commented 2 years ago

It no longer happens to me. If it happens again, I will try that before re-engaging.

AlbinoGeek commented 2 years ago

I just had this happen for me again when I dropped on to the material icons page from google, and I started typing in the icon search before the application switched into dark mode (saved preference).

It seems like you can cause code to be executed before hydration, or before the dogs are initialized, which reproduces this issue pretty reliably.

On Tue., Feb. 8, 2022, 10:13 a.m. Rhett Lowe, @.***> wrote:

It no longer happens to me. If it happens again, I will try that before re-engaging.

โ€” Reply to this email directly, view it on GitHub https://github.com/mui/material-ui/issues/30562#issuecomment-1032916075, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAOSNPNJJKVAGK7HRUQN3YDU2FMOBANCNFSM5LSPIQVA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

AlbinoGeek commented 2 years ago

Continues to be reproducible on Data Tables and Material Icons pages.

michaldudak commented 2 years ago

It seems to be specific to your setup. I was not able to reproduce the issue, nor I have seen any other reports outside of this issue. If you're willing to dive deeper and debug the problem, we'll be glad to accept a fix.

AlbinoGeek commented 2 years ago

An issue I've had with react applications in general, is that they're not really debuggable.

I'm sure that means I'm missing something required to develop efficiently.

But as you saw with the stock traces I posted, they're not exactly useful.

Even with Source maps loaded, the line numbers on the stack link me to comments, and not actual code. Is there a Chrome extension necessary to make the stack useful?

I would love to get to the bottom of this.

I have also reproduced this in firefox, and in a Chrome Incognito window, which I disabled all extensions for.

The only plug-in enabled at that point, was Cisco's open h265 decoder, because that's installed system wide on Fedora.

On Wed., Mar. 23, 2022, 5:01 a.m. Michaล‚ Dudak, @.***> wrote:

It seems to be specific to your setup. I was not able to reproduce the issue, nor I have seen any other reports outside of this issue. If you're willing to dive deeper and debug the problem, we'll be glad to accept a fix.

โ€” Reply to this email directly, view it on GitHub https://github.com/mui/material-ui/issues/30562#issuecomment-1076295441, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAOSNPL7FKJJKCZQZ7HFCNTVBMBYRANCNFSM5LSPIQVA . You are receiving this because you were mentioned.Message ID: @.***>

michaldudak commented 2 years ago

Stack traces should be more readable if you run the docs site from sources: clone the repo and run yarn start in the root of the working copy.

AlbinoGeek commented 2 years ago

100% reproduction rate on the live website if you open Google chrome, open the network tab, and set it to shape you to 3G.

Seems to be related to interacting with the page before it's finished uploading, before it hydrates.

Running the application locally, clicking on any of the stack Trace entries, the line numbers still don't match up.

But again, this could easily be my problem, react does this for me everywhere.

I'll keep looking into this, and update this if I find a root cause.

One other person in this thread had the same issue as me, but didn't provide many details.

On Wed., Mar. 23, 2022, 5:24 a.m. Michaล‚ Dudak, @.***> wrote:

Stack traces should be more readable if you run the docs site from sources: clone the repo and run yarn start in the root of the working copy.

โ€” Reply to this email directly, view it on GitHub https://github.com/mui/material-ui/issues/30562#issuecomment-1076315922, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAOSNPK76ETTHZQIO6YIJLDVBMEODANCNFSM5LSPIQVA . You are receiving this because you were mentioned.Message ID: @.***>

michaldudak commented 2 years ago

It works fine on both Chrome and Edge for me, even with cache disabled and on the 'Slow 3G' profile. I'm using Windows, though.

AlbinoGeek commented 2 years ago

Thanks for testing that, I will install Windows in a VM, and on my second computer, to see if the issue is specific to Fedora or Linux.

It's not a super pervasive or blocking issue, because if your patient and just let the page load first, the error doesn't happen.

If I go to the material icons page, and I start typing immediately to search the icons, it crashes every time.

If I go to the data tables page and start modifying the filters before the page completes loading, same thing.

It would definitely be curious if this was a linux-specific issue.

Thank you for your patience and help on investigating this issue. I don't like creating this many notifications for people haha.

On Wed., Mar. 23, 2022, 5:51 a.m. Michaล‚ Dudak, @.***> wrote:

It works fine on both Chrome and Edge for me, even with cache disabled and on the 'Slow 3G' profile. I'm using Windows, though.

โ€” Reply to this email directly, view it on GitHub https://github.com/mui/material-ui/issues/30562#issuecomment-1076339898, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAOSNPOZ6BB6HUUC266YAU3VBMHVJANCNFSM5LSPIQVA . You are receiving this because you were mentioned.Message ID: @.***>

Ihor999 commented 2 years ago

datagrid version 5.17.8 still has the error steps to reproduce

  1. place datagrid on a page
  2. place datagrid on the same page inside dialog
  3. open dialog and click on datagrid row

image

as a result publishClick** event fired twice for both datagrids but second event can't find column.

Any thoughts why event rowClick event fired twice for both datagrids?

AlbinoGeek commented 2 years ago

Hey there! I don't think your issue has anything to do with this. In particular, this issue is talking about the documentation site exploding.

An update as well, I do apologize for the delay, I have a native Windows machine now, and can reproduce this 100% in Brave and Chrome.

Basically, just be impatient. Try and type in the search Fields before the page has loaded, or use keyboard navigation before the page has loaded.

It is significantly easier to cause if you have dark reader installed, because that delays the first contentful paint, which can make bugs in script execution order present themselves far more often than they would under normal circumstances.

The larger the documentation page, the easier this is to reproduce. If you have developer tools open, and simulate 3G, you can almost get it 100% of the time even without dark reader.

On Fri., Oct. 28, 2022, 1:45 a.m. Ihor999, @.***> wrote:

datagrid version 5.17.8 still has the error steps to reproduce

  1. place datagrid on a page
  2. place datagrid on the same page inside dialog
  3. open dialog and click on datagrid row

[image: image] https://user-images.githubusercontent.com/10143613/198543820-81a7ee41-6241-4b6e-a644-e2bafd426408.png

as a result publishClick** event fired twice for both datagrids but second event can't find column.

Any thoughts why event rowClick event fired twice for both datagrids?

โ€” Reply to this email directly, view it on GitHub https://github.com/mui/material-ui/issues/30562#issuecomment-1294712018, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAOSNPPUFP54TJGDSPK5P7DWFOHCFANCNFSM5LSPIQVA . You are receiving this because you modified the open/close state.Message ID: @.***>

yelodevopsi commented 2 years ago

datagrid version 5.17.8 still has the error steps to reproduce

  1. place datagrid on a page
  2. place datagrid on the same page inside dialog
  3. open dialog and click on datagrid row

image

as a result publishClick** event fired twice for both datagrids but second event can't find column.

Any thoughts why event rowClick event fired twice for both datagrids?

This is more or less the exact setup I have too. When opening a Dialog with another DataGrid inside the column.type check fails

michaldudak commented 2 years ago

@rompeldunk For problems with DataGrid please open an issue in the https://github.com/mui/mui-x repo.

@AlbinoGeek I still cannot reproduce the issue. I installed Dark Reader, turned on Slow 3G emulation, went to https://mui.com/material-ui/material-icons, and started to type in the search box while the page was still loading. The search didn't work at first, but there were no crashes.

In the console, the only error I got was from ads:

carbon.js?serve=CKYIL27L&placement=material-uicom:1 Uncaught TypeError: Cannot read properties of null (reading 'src')
    at Object.getUrlVar (carbon.js?serve=CKYIL27L&placement=material-uicom:1:9144)

but it didn't cause any visible problems on the site.

cc @mui/core Perhaps someone else will be able to reproduce it.

boldurean commented 1 year ago

datagrid version 5.17.8 still has the error steps to reproduce

  1. place datagrid on a page
  2. place datagrid on the same page inside dialog
  3. open dialog and click on datagrid row

image as a result publishClick** event fired twice for both datagrids but second event can't find column. Any thoughts why event rowClick event fired twice for both datagrids?

This is more or less the exact setup I have too. When opening a Dialog with another DataGrid inside the column.type check fails

Make sure you don't have a cicle dependencies in your code. As this was exactly what happened to me. It clicks cicle twice instead of one time.

NeelDigonto commented 1 year ago

datagrid version 5.17.8 still has the error steps to reproduce

  1. place datagrid on a page
  2. place datagrid on the same page inside dialog
  3. open dialog and click on datagrid row

image as a result publishClick** event fired twice for both datagrids but second event can't find column. Any thoughts why event rowClick event fired twice for both datagrids?

This is more or less the exact setup I have too. When opening a Dialog with another DataGrid inside the column.type check fails

Make sure you don't have a cicle dependencies in your code. As this was exactly what happened to me. It clicks cicle twice instead of one time.

Can you explain a bit more? This same issue is bugging me, and I don't seem to get a solution from Google.

peter-hg commented 1 year ago

datagrid version 5.17.8 still has the error steps to reproduce

  1. place datagrid on a page
  2. place datagrid on the same page inside dialog
  3. open dialog and click on datagrid row

image as a result publishClick** event fired twice for both datagrids but second event can't find column. Any thoughts why event rowClick event fired twice for both datagrids?

This is more or less the exact setup I have too. When opening a Dialog with another DataGrid inside the column.type check fails

Make sure you don't have a cicle dependencies in your code. As this was exactly what happened to me. It clicks cicle twice instead of one time.

Can you explain a bit more? This same issue is bugging me, and I don't seem to get a solution from Google.

Adding e.stopPropagation() to the click handler fixed it for me.

Luif3rch commented 1 year ago

today this type error happens a lot when you have a table inside a dialog and you are passing data as libraries like reactquery.

AddisonGm commented 1 year ago

I'm stuck with this error... any update @AlbinoGeek? It's happening when data grid table is rendered