Material-ui: [docs] demo fails responsive width change - context[CHANNEL].unsubscribe is not a function

[rosskevin]

Problem description

On the demo, change width and responsive change fails with

Uncaught TypeError: context[CHANNEL].unsubscribe is not a function
    at Object.unsubscribe (themeListener.js:27)
    at Style.componentWillUnmount (withStyles.js:116)
    at ReactCompositeComponent.js:408
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper.unmountComponent (ReactCompositeComponent.js:407)
    at Object.unmountComponent (ReactReconciler.js:78)
    at ReactCompositeComponentWrapper.unmountComponent (ReactCompositeComponent.js:417)
    at Object.unmountComponent (ReactReconciler.js:78)
    at Object.unmountChildren (ReactChildReconciler.js:146)
    at ReactDOMComponent.unmountChildren (ReactMultiChild.js:371)

Link to minimal working code that reproduces the issue

demo

Versions

• Material-UI: 72970c59204bc52f28c21808a1272cdb39bbf194
• React: 15.6.1
• Browser: chrome and canary

[rosskevin]

Seems related to 432795c77fcd05795fa9e8ee736512aba0dbf598 @oliviertassinari

[rosskevin]

yarn in root, and in docs fixed the problem.

[pjuke]

I'm experiencing the same issue, but not in the docs but on my site since I updated to latest release (beta.5).
I'm not using yarn and it seems weird that is required to resolve the issue.

What is causing this issue and how can I resolve it?
Im only rendering the <SimpleMenu /> component from the docs as an example, and it gives this error as soon as it closes.

[rosskevin]

yarn install or npm install whichever you are using. Dependencies are out of date.

[pjuke]

Thank you!
rm -rf ./node_modules/ && npm install did the trick.

[kristojorg]

I am seeing this error on the latest beta (1.0.0-beta.6). Tried deleting and reinstalling node_modules, but the error persists. Seems to happen when trying to unmount a card.

[kristojorg]

Further the issue is resolved when I downgrade to beta4, so it does seem to be related to
https://github.com/callemall/material-ui/commit/432795c77fcd05795fa9e8ee736512aba0dbf598

[kristojorg]

Still experiencing this issue with beta8, has anybody else had this problem?

[oliviertassinari]

@kristojorg Haven't heard about it. Maybe you could try to setup a reproduction repository?

[kristojorg]

@oliviertassinari yep I'll give that a shot soon

[humanamburu]

Hi there,

Also seeing this issue on the latest (1.0.0-beta.8) during to route change (== unmounting). But without MuiThemeProvider in the root all works fine.

[PolGuixe]

I am also seeing this problem in 1.0.0-beta-8, with the Hidden component.

[PolGuixe]

@oliviertassinari you can check it here: https://github.com/Zetoff/portfolio/tree/feature/responsive-navbar
and here: http://wiry-hour.surge.sh/test/

It is a Gatsby site. The Hidden component is used in the AppBar and in the localhost:8000/test page.

I am also experiencing other issues with the Hidden component. I'll open another issue.

Edit: If you change the width you can notice that the MenuIcon in the Navbar losses its style.

[oliviertassinari]

@PolGuixe the unsubscribe function was added by brcase@3 but I can't see it in your context tree.

Your repository is working on my end, make sure you have the right version of brcast installed. Also in the doubt use yarn over npm, the npm team has proven not to do a very good job over last few years.

[PolGuixe]

Thanks @oliviertassinari. How did you manage to use yarn with the project? I am getting this error: https://github.com/gatsbyjs/gatsby/issues/2076

[oliviertassinari]

Maybe try to clear the node_modules first.

[PolGuixe]

I've tried that several times 😅. Did it work straight away in your end with just yarn?

[PolGuixe]

Anyway, after unsuccessfully trying with yarn, I went back to npm and now it works.... 😞

[oliviertassinari]

I'm glad it's working with npm :).

[PolGuixe]

I was running crazy. While Material-UI worked fine in most projects, when I was trying to use it with Gatsby I had a problem with this bug.
In Gatsby I am using the gatsby-plugin-jss which depends on react-jss, which depends on [email protected]. However, material-ui depends on [email protected]. For some reason, material-ui was using [email protected], and this is causing the bug.
In order to solve I had to install [email protected] at project level.
I don't know if it is the best way, but at least it works.

[oliviertassinari]

@PolGuixe I'm not sure there is anything we can do about it at the Material-UI level. Hopefully, this feedback will help others.