[TreeItem] Cannot read properties of undefined

[milantarami]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

Note : this was working fine in v4 recently i upgraded to v5

i am building a tree view with an async data which works well at first but randomly clicking the label which fetches async data & build children ..... at some point of random clicks it throws error Can't read disabled property at TreeItem

app.js:42785 

       Uncaught TypeError: Cannot read properties of undefined (reading 'disabled')
    at app.65453c581ae4a081.hot-update.js:168:16
    at TreeItem (app.js:6417:33)
    at renderWithHooks (vendor.js:14994:18)
    at updateForwardRef (vendor.js:17053:20)
    at beginWork (vendor.js:19107:16)
    at HTMLUnknownElement.callCallback (vendor.js:3954:14)
    at HTMLUnknownElement.sentryWrapped (app.js:42770:23)
    at Object.invokeGuardedCallbackDev (vendor.js:4003:16)
    at invokeGuardedCallback (vendor.js:4065:31)
    at beginWork$1 (vendor.js:23968:7)
    at performUnitOfWork (vendor.js:22780:12)
    at workLoopSync (vendor.js:22711:5)
    at renderRootSync (vendor.js:22674:7)
    at performSyncWorkOnRoot (vendor.js:22297:18)
    at vendor.js:11336:26
    at unstable_runWithPriority (app.js:203827:12)
    at runWithPriority$1 (vendor.js:11285:10)
    at flushSyncCallbackQueueImpl (vendor.js:11331:9)
    at flushSyncCallbackQueue (vendor.js:11318:3)
    at scheduleUpdateOnFiber (vendor.js:21897:9)
    at dispatchAction (vendor.js:16148:5)
    at _callee3$ (app.65453c581ae4a081.hot-update.js:1407:15)
    at tryCatch (app.js:202209:40)
    at Generator.invoke [as _invoke] (app.js:202440:22)
    at Generator.next (app.js:202265:21)
    at asyncGeneratorStep (app.65453c581ae4a081.hot-update.js:1098:103)
    at _next (app.65453c581ae4a081.hot-update.js:1100:194)

Expected behavior 🤔

No response

Steps to reproduce 🕹

No response

Context 🔦

No response

Your environment 🌎

Tested on : Microsoft Edge latest version Mozilla latest version Chrome latest version

[hbjORbj]

Hi.

Cannot read properties of undefined (reading 'disabled')

This error suggests that you are doing something like object.disabled where object is undefined.

This may not be related to the TreeItem component but rather how you handle functions.

If you still think the error is related to the component, can you provide a codesandbox that reproduces the error?

You can fork this template: https://material-ui.com/r/issue-template-latest

[milantarami]

The problem is here . It trying to access undefined properties node.disabled & node.parentId

It worked when Fix1 : replace node.disabled with node?.disabled in line 148, 154 Fix2: replace node.parentId with node?.parentId in line 152

https://github.com/mui/material-ui/blob/0cf1a4bc99272cf646276b68cd2535c9ef301ae4/packages/mui-lab/src/TreeView/TreeView.js#L148-L157

[hbjORbj]

Hey, Thanks. I just had a look, and we already check if node is undefined or not first before checking node.disabled or node.parentId. Could you console.log node in your case and tell me what it is?

https://github.com/mui/material-ui/blob/0cf1a4bc99272cf646276b68cd2535c9ef301ae4/packages/mui-lab/src/TreeView/TreeView.js#L140-L160

[milantarami]

yeah but can you show me where it is checked if node hasOwnProperty disabled & parentId before accessing it ... may i didn't find it

https://github.com/mui/material-ui/blob/0cf1a4bc99272cf646276b68cd2535c9ef301ae4/packages/mui-lab/src/TreeView/TreeView.js#L148

https://github.com/mui/material-ui/blob/0cf1a4bc99272cf646276b68cd2535c9ef301ae4/packages/mui-lab/src/TreeView/TreeView.js#L152

https://github.com/mui/material-ui/blob/0cf1a4bc99272cf646276b68cd2535c9ef301ae4/packages/mui-lab/src/TreeView/TreeView.js#L154

[hbjORbj]

yeah but can you show me where it is checked if node hasOwnProperty disabled & parentId before accessing it ... may i didn't find it

I don't think this is relevant to your error, and we actually don't need it because isDisabled function already has if conditionals to check if these values exist. If node.disabled or node.parentId was undefined, the function would've just returned false and an error throw is not expected. The error you shared tells us that node is undefined. As I asked, Could you console.log node in your case and tell me what it is?

[milantarami]

I had set disabled prop default false. I don't think this is a issue with node , node looks find but what is this unexpected bug. Note : this was working fine in v4 This disabled prop is introduced in v5 and i am getting this unexpected bug

It throws error in random tree node.

Video

[hbjORbj]

Can you provide a codesandbox that reproduces the error?

You can fork this template: https://material-ui.com/r/issue-template-latest

[github-actions[bot]]

Since the issue is missing key information, and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[iBreadInside]

So, does somebody know how to fix that? I have same issue.

[jsteinbergTCALLC]

So, does somebody know how to fix that? I have same issue.

I was getting the error "Uncaught TypeError: Cannot read properties of undefined (reading 'disabled')", Stack appears to have the error somewhere in the TreeItem code.... (Not a Javacsript expert, so my be wrong, but I'm pretty sure the error did no originate in my code...)

TypeError: Cannot read properties of undefined (reading 'disabled')
    at TreeItem (http://localhost:3000/static/js/bundle.js:42204:82)
<rest of call stack snipped>

the root cause turned out to be adding nodes with duplicate NodeId. Uniquifying NodeId's stopped this. YMMV

[Adnanear]

@jsteinbergTCALLC That's not the only problem, I'm literally having a set of nodes, each one have a complete different nodeId. Yet I get the same issue.

[milantarami]

So, does somebody know how to fix that? I have same issue.

I had solved the issue by creating a override of an file and module replacement in webpack config in my laravel project

const webpack = require("webpack");
const path = require("path");

// Define your asset paths
const jsSrc = "resources/js";
const jsDist = "public/dist/js";

// Mix Configuration
mix.js(`${jsSrc}/app.js`, `${jsDist}/app.js`)
    .react()
    .extract(["react", "react-dom"])
    .webpackConfig({
        resolve: {
            extensions: [".js", ".jsx", ".json"],
            alias: {
                "@": path.resolve(__dirname, jsSrc),
            },
        },
        plugins: [
            new webpack.NormalModuleReplacementPlugin(
                new RegExp(
                    "node_modules\\/@mui\\/x-tree-view\\/internals\\/plugins\\/useTreeViewNodes\\/useTreeViewNodes\\.js$"
                ),
                path.resolve(
                    __dirname,
                    "./node_modules_overrides/@mui/x-tree-view/internals/plugins/useTreeViewNodes/useTreeViewNodes.js"
                )
            ),
        ],
    });

// BrowserSync Configuration
mix.browserSync({
    proxy: "localhost:8000",
    open: false,
    notify: false,
});

// Additional Production Configuration
if (mix.inProduction()) {
    mix.version();
}