Material-ui: Bug with @material-ui/core/ButtonBase/TouchRipple: Cannot read property '0' of undefined

[theonelucas]

I got the following error:

TypeError@material-ui/core/ButtonBase/TouchRipple in action
Cannot read property '0' of undefined

On file:

@material-ui/core/ButtonBase/TouchRipple.js

Line 186, as shown above:

• [x] This is a v1.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Steps to Reproduce

I did not found a pattern, this error happened with different users

Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.4.1 |
| React | 16.2.0 |
| browser | Chrome 67.0.3396 |

[oliviertassinari]

@TheoneLucas How can we reproduce the issue? What browser are you users using? I suspect it's impacting browsers we don't support.
https://github.com/mui-org/material-ui/blob/8013fdd36d40980ebb8f116f20e2843b781c0c39/packages/material-ui/src/ButtonBase/TouchRipple.js#L161

[theonelucas]

@oliviertassinari It's Chrome 67.0.3396, but I do not know how to reproduce it as it happened with one of my users and not me. I gathered the error through Sentry, so that's how I know the browser version.

[oliviertassinari]

It's good to know. How many users are impacted?

[theonelucas]

So far 2.

[oliviertassinari]

Alright. Let's assume they are using a broken Chrome extension.

[theonelucas]

Like which extension? That does what?

[oliviertassinari]

Maybe you could use the sharing feature of Sentry so I can have a look at? I would encourage you to use the ignore feature of Sentry for this one. I don't think that it worth sending more time on an issue we can't reproduce that impacts 2 people. It could even be coming from someone hacking around in the console.

[theonelucas]

Oh, I just checked again and noticed that is not just two, but three users, actually eight, beacause there are five more in another issue that is exatly the same, except the OS version that changes to android 6. Here is the issue link:

https://sentry.io/share/issue/97c3056f0ba74bf5abaab26a816019f2/

[oliviertassinari]

@TheoneLucas Thanks for the link. It's definitely a strange issue. We will reopen it once we have a reproduction.

[pravinbashyal]

did anyone find the way to reproduce this? this keeps happening arbitrarily in our app as well.

[sweetcoco]

Hey guys, I'm really hoping this thread hasn't gone stale. I'm running into this issue as i'm writing our SSR stuff with NextJS.

Uncaught TypeError: Cannot read property '1' of undefined
...
The above error occurred in the <WithStyles(TouchRipple)> component:
    in WithStyles(TouchRipple) (created by ButtonBase)
    in NoSsr (created by ButtonBase)
    in button (created by ButtonBase)
    in ButtonBase (created by WithStyles(ButtonBase))

I've narrowed it down to a Fab component. If i set disableTouchRipple to true, the issue does not appear.

This seems to be a ssr issue? Idk if previous posters can confirm or not? The issue happens for me in Chrom 71.0.3578.98 and Safari 12.0.2

What i think is interesting is I copied the matieral-ui nextjs example into a new project and it did _not_ blow up... but it does blow up in my app which is obviously much more complex.

I think it has something to do with how muiThemeProvider is set up. In the example i linked above the createGenerateClassname() is called straight from the mui import:

function createPageContext() {
  return {
    theme,
    // This is needed in order to deduplicate the injection of CSS in the page.
    sheetsManager: new Map(),
    // This is needed in order to inject the critical CSS.
    sheetsRegistry: new SheetsRegistry(),
    // The standard class name generator.
    generateClassName: createGenerateClassName(),
  };
}

and placed directly as a prop on JssProvider:

// _app.js
        <JssProvider
          registry={this.pageContext.sheetsRegistry}
          generateClassName={this.pageContext.generateClassName}
        >

but in my app we do this:

// createPageContext.js
  const jss = create(preset());
  jss.options.createGenerateClassName = createGenerateClassName;

  return {
    jss,
    theme,
    // This is needed in order to deduplicate the injection of CSS in the page.
    sheetsManager: new Map(),
    // This is needed in order to inject the critical CSS.
    sheetsRegistry: new SheetsRegistry()
    // generateClassName: createGenerateClassName()
  };

and then set jss on the JssProvider in _app.js...

// _app.js
<JssProvider registry={context.sheetsRegistry} jss={context.jss}>

sorry if this is hard to follow, just trying to document whats happening to me.

if i change my createGenerateClassName on JssProvider to the one in the above linked example, the issue does not happen.

[oliviertassinari]

@sweetcoco This is strange. Do you have a reproduction? I can't help with just the error message. Maybe with the stack trace?

[bingyuanng]

Hi, I'm getting this error on version 4.0.1 as well when i use the Tab component, probably cause by the ripple effect. Did anyone manage to resolve this ?
Here's my log

Uncaught TypeError: Cannot read property '1' of undefined
    at supportedKeyframes (css-vendor.esm.js:68)
    at Array.onProcessRule (jss-plugin-vendor-prefixer.esm.js:13)
    at PluginsRegistry.onProcessRule (PluginsRegistry.js:80)
    at Array.forEach (<anonymous>)
    at RuleList.process (RuleList.js:184)
    at new StyleSheet (StyleSheet.js:93)
    at Jss.createStyleSheet (Jss.js:162)
    at attach (makeStyles.js:98)
    at makeStyles.js:240
    at useSynchronousEffect (makeStyles.js:184)
    at makeStyles.js:232
    at WithStyles (withStyles.js:46)
    at renderWithHooks (react-dom.development.js:13450)
    at updateForwardRef (react-dom.development.js:15014)
    at beginWork (react-dom.development.js:16290)
    at performUnitOfWork (react-dom.development.js:20285)
    at workLoop (react-dom.development.js:20326)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at replayUnitOfWork (react-dom.development.js:19509)
    at renderRoot (react-dom.development.js:20439)
    at performWorkOnRoot (react-dom.development.js:21363)
    at performWork (react-dom.development.js:21273)
    at performSyncWork (react-dom.development.js:21247)
    at requestWork (react-dom.development.js:21102)
    at scheduleWork (react-dom.development.js:20915)
    at Object.enqueueForceUpdate (react-dom.development.js:11633)
    at Query.push../node_modules/react/cjs/react.development.js.Component.forceUpdate (react.development.js:355)
    at Query._this.updateCurrentData (react-apollo.esm.js:244)
    at Object.next (react-apollo.esm.js:217)
    at notifySubscription (Observable.js:152)
    at onNotify (Observable.js:196)
    at SubscriptionObserver.next (Observable.js:248)
    at bundle.esm.js:470
    at Array.forEach (<anonymous>)
    at Object.next (bundle.esm.js:469)
    at QueryManager.<anonymous> (bundle.esm.js:1573)
    at step (tslib.es6.js:208)
    at Object.next (tslib.es6.js:138)
    at tslib.es6.js:111
    at new Promise (<anonymous>)
    at __awaiter (tslib.es6.js:88)
    at bundle.esm.js:1447
    at bundle.esm.js:2021
    at Array.forEach (<anonymous>)
    at bundle.esm.js:2020
    at Map.forEach (<anonymous>)
    at QueryManager.broadcastQueries (bundle.esm.js:2016)
    at QueryManager.<anonymous> (bundle.esm.js:2145)

The above error occurred in the <WithStyles(TouchRipple)> component:
    in WithStyles(TouchRipple) (created by ForwardRef(ButtonBase))
    in NoSsr (created by ForwardRef(ButtonBase))
    in button (created by ForwardRef(ButtonBase))
    in ForwardRef(ButtonBase) (created by WithStyles(ForwardRef(ButtonBase)))
    in WithStyles(ForwardRef(ButtonBase)) (created by ForwardRef(Tab))
    in ForwardRef(Tab) (created by WithStyles(ForwardRef(Tab)))
    in WithStyles(ForwardRef(Tab)) (at PatientLifestyleWidget.js:107)

Version: 4.0.1
Chrome version: 74.0.3729.157

[oliviertassinari]

@bingyuanng Could it be a problem with the version of JSS installed?

[mohshbool]

@bingyuanng I'm having the same issue as you, even after updating mui to 4.0.2 and jss to 9.8.7

[oliviertassinari]

JSS correct version is v10 (alpha).

[mohshbool]

@oliviertassinari updating to v10 worked for me. one last question, is there any way to reload the whole styling? since the space that is made for the label in the outlined TextField is not accurate when the language changes since the strings are not the same length. Thanks again!

[oliviertassinari]

You can add a key based on the active language.

[mohshbool]

@oliviertassinari really sorry to bug you with this, but I'm new to Material UI, can you elaborate on your answer, please? Thank you so much.

[oliviertassinari]

@mblodorn I can't, not here. It's something we have covered in a previous issue. You can ask on StackOverflow, it's better suited.

[bingyuanng]

@octavioamu updating to v10 works for me. Thank you so much.