TypeError: vendor.supportedKeyframes is not a function

[lmachens]

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

Expected Behavior 🤔

import { install } from '@material-ui/styles';
install();

should switch default style implementation and don't throw an error.

Current Behavior 😯

It throws this error when install() is called before and an component is mounted. When I remove this line, I don't get any error, but it uses the old style implements (of course).

Storybook build:

vendor.supportedKeyframes is not a function
    TypeError: vendor.supportedKeyframes is not a function
    at Array.onProcessRule (http://localhost:6006/vendors~main.79a40410d9c928a0a28b.bundle.js:68668:26)
    at PluginsRegistry.onProcessRule (http://localhost:6006/vendors~main.79a40410d9c928a0a28b.bundle.js:69245:36)
    at Array.forEach (<anonymous>)
    at RuleList.process (http://localhost:6006/vendors~main.79a40410d9c928a0a28b.bundle.js:69499:27)
    at new StyleSheet (http://localhost:6006/vendors~main.79a40410d9c928a0a28b.bundle.js:69856:16)
    at Jss.createStyleSheet (http://localhost:6006/vendors~main.79a40410d9c928a0a28b.bundle.js:69090:19)
    at attach (http://localhost:6006/vendors~main.79a40410d9c928a0a28b.bundle.js:40795:39)
    at WithStylesInner.render (http://localhost:6006/vendors~main.79a40410d9c928a0a28b.bundle.js:40960:13)
    at finishClassComponent (http://localhost:6006/vendors~main.79a40410d9c928a0a28b.bundle.js:97983:31)
    at updateClassComponent (http://localhost:6006/vendors~main.79a40410d9c928a0a28b.bundle.js:97938:24)

Webpack build:

VM98094 jss-plugin-vendor-prefixer.esm.js:19 Uncaught (in promise) TypeError: Object(...) is not a function
    at Array.onProcessRule (VM98094 jss-plugin-vendor-prefixer.esm.js:19)
    at PluginsRegistry.onProcessRule (VM98068 PluginsRegistry.js:56)
    at Array.forEach (<anonymous>)
    at RuleList.process (VM98050 RuleList.js:163)
    at new StyleSheet (VM98064 StyleSheet.js:55)
    at Jss.createStyleSheet (VM98066 Jss.js:123)
    at attach (VM98037 withStyles.js:145)
    at WithStylesInner.render (VM98037 withStyles.js:310)
    at finishClassComponent (react-dom.development.js?61bb:14524)
    at updateClassComponent (react-dom.development.js?61bb:14479)

Steps to Reproduce 🕹

Not sure how to reproduce this issue. It do not happen on SSR and not in NextJS (I use @material-ui/styles in multiple projects).

But when I check my package-lock.json, I notice that css-vendor (where one of the errors is coming from) is installed in 0.3.8. But supportedKeyframes was added later. So I guess my packages are messed up.

package.json

"dependencies": {
    "@babel/runtime": "^7.3.1",
    "@grapes-agency/app-frame-messages": "^1.3.2",
    "@lmachens/react-grid-layout": "^0.16.7",
    "@material-ui/core": "^3.9.1",
    "@material-ui/icons": "^3.0.2",
    "@material-ui/styles": "^3.0.0-alpha.9",
    "ajv": "^6.7.0",
    "cors": "^2.8.5",
    "es6-object-assign": "^1.1.0",
    "event-source-polyfill": "^1.0.5",
    "express": "^4.16.4",
    "lodash": "^4.17.11",
    "oidc-client": "^1.6.1",
    "promise-polyfill": "8.1.0",
    "qs": "^6.6.0",
    "react": "^16.8.0-alpha.1",
    "react-document-title": "^2.0.3",
    "react-dom": "^16.8.0-alpha.1",
    "react-jss": "^8.6.1",
    "react-loadable": "^5.5.0",
    "react-router-dom": "^4.3.1",
    "react-swipeable-views": "^0.13.1",
    "serve-favicon": "^2.5.0",
    "ua-parser-js": "^0.7.19",
    "uniforms": "^1.31.0",
    "uniforms-material": "^1.31.0",
    "web-push": "^3.3.3"
  },

package-lock.json

 "css-vendor": {
      "version": "0.3.8",
      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-0.3.8.tgz",
      "integrity": "sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=",
      "requires": {
        "is-in-browser": "^1.0.2"
      }
    },

I tried to manual update css-vendor, but then I get this error:

Uncaught (in promise) TypeError: Cannot read property '1' of undefined
    at supportedKeyframes (VM151 supported-keyframes.js:24)
    at Array.onProcessRule (VM148 jss-plugin-vendor-prefixer.esm.js:19)
    at PluginsRegistry.onProcessRule (VM122 PluginsRegistry.js:56)
    at Array.forEach (<anonymous>)
    at RuleList.process (VM104 RuleList.js:163)
    at new StyleSheet (VM118 StyleSheet.js:55)
    at Jss.createStyleSheet (VM120 Jss.js:123)
    at attach (VM91 withStyles.js:145)
    at WithStylesInner.render (VM91 withStyles.js:310)
    at finishClassComponent (react-dom.development.js?61bb:14524)

Any idea someone?

[oliviertassinari]

@lmachens It's coming from a JSS version mismatch. You should have JSS v10 installed over JSS v9 in your project. Remove react-jss dependency, you don't need it.

[mkermani144]

I have exactly the same issue while I don't have react-jss as a dependency.

[mohshbool]

@mkermani144 I'm facing the same issue using jss@9.8.7

[MohammedFaragallah]

same error solved by installing jss: 10.0.0-alpha.20

[adin-ttc]

@MohammedFaragallah thanks. I was also getting a similar error which I believe was related to my implementation of a custom JSS prefix. Upgrading to 10.0.0-alpha.20 solved it.. I had removed react-jss and upgraded jss-rtl to latest but in the end material-ui still only referenced 10.0.0-alpha.17

` import React from 'react'; import { create } from 'jss'; import rtl from 'jss-rtl'; import { createGenerateClassName, StylesProvider, jssPreset } from '@material-ui/styles';

const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

const generateClassName = createGenerateClassName({ productionPrefix: 'tc-', seed: "mp" });

function rtlJssProvider(props) { return (

{props.children}

) } `

[hosseinalipour]

I wonder what package exactly it conflicts with? because It was working a week ago, since then I didn't change anything in package.json and this exact same error happened today after beginning to use jss. however, after I upgraded to v10, it worked again.