Issue with react-tree-walker

[chnliquan]

i use material-ui + react-async-bootstrapper
implement react ssr, In the development environment, using react ssr to report an error, the production environment is normal

Warning: Rendering <Context.Consumer.Provider> is not supported and will be removed in a future major release. Did you mean to render <Context.Provider> instead?
Warning: Rendering <Context.Consumer.Consumer> is not supported and will be removed in a future major release. Did you mean to render <Context.Consumer> instead?
TypeError: Cannot read property 'dense' of undefined
    at Object.eval [as children] (webpack:///./node_modules/@material-ui/core/ListItem/MergeListContext.js?:27:31)
    at recursive (/Users/ender/learning/github/react-cnode/node_modules/react-tree-walker/dist/react-tree-walker.js:129:41)
    at /Users/ender/learning/github/react-cnode/node_modules/react-tree-walker/dist/react-tree-walker.js:153:26
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:189:7)

Your Environment 🌎

Tech	Version
Material-UI	v3.9.2
React	v16.8.3
Browser	chrome
react-async-bootstrapper	v2.1.1

[chnliquan]

I found that deleting the import List from '@material-ui/core/List' component will not give an error.

[joshwooding]

@chnliquan Do you have a minimal reproducible example?

[chnliquan]

@joshwooding https://github.com/chnliquan/react-cnode
This problem occurs in development mode. This problem does not occur after I delete the List component. The production environment will not go wrong whether or not it contains a List component.

[oliviertassinari]

@chnliquan You are using the react-tree-walker dependency. They don't support the new context API: ctrlplusb/react-tree-walker#47. But more importantly, it's only advised for advanced users that know what they are doing: https://github.com/ctrlplusb/react-tree-walker#disclaimer. Since you are opening an issue on Material-UI side, I would guess that you are only interested in something that works. So I would advise you to remove this dependency.

We have no leverage over this external dependency limitation. I'm closing.

[chnliquan]

@oliviertassinari this problem only exists with the development environment, the production environment is no problem, If there is a problem, the behavior of the development environment and the production environment should be the same?

[chnliquan]

I do react ssr need to use this package for data synchronization. If you suggest me to remove, are there any other solution suggestions?

[oliviertassinari]

@chnliquan react-tree-walker dependency is likely legacy, they don't support the context, probably not the hooks either 🤔. Have you tried Next.js? Apollo was using a strategy closed to react-tree-walker, they have stopped doing it for this very problem. They are now rendering the tree x times until they reach all the leaves. It has a huge performance implication. Next.js solves the problem by co-locating all the data fetching at the root. React is working on a solution in the core of the library.

[chnliquan]

@oliviertassinari Thank you for your reply 😄， If I use next.js I need to replace the entire server architecture 😣 , future projects can be considered, but now I have built this project, I just want to find a library similar to react-async-bootstrapper that can solve data synchronization.

[duynbicts]

@chnliquan Did you resolve this problem?