Material-ui: [System] TypeError: Object(...) is not a function

[brianblakely]

Using Box causes JSS to malfunction. JSS's createRule becomes equal to the Object built-in, which triggers an error.

• [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 🤔

I should be able to use Box in my application.

Current Behavior 😯

Can't do it.

Steps to Reproduce 🕹

Link: https://github.com/brianblakely/atlantis/tree/mui-system-error

The relevant code:
https://github.com/brianblakely/atlantis/blob/mui-system-error/src/index.js

1. Clone the above repo with the --recurse-submodules flag.
2. Ensure you are on the mui-system-error branch.
3. Run npm start.
4. Witness the bug.

Context 🔦

I want to use MUI System.

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | 4.alpha.0 |
| React | 16.8.2 |
| Browser | Chrome |

[oliviertassinari]

@brianblakely I haven't tested your example (providing a codesandbox would have been perfect). If I had to bet, I would say that it's a problem with the theme. The Box currently needs a ThemeProvider. I'm working on the problem in https://github.com/mui-org/material-ui/pull/14560 by adding a warning and by removing the ThemeProvider requirement.

Can you confirm?

[brianblakely]

Unfortunately, I cannot reproduce this issue with codesandbox, try as I did.

I have been using MuiThemeProvider in my application, so I will switch to ThemeProvider and confirm ASAP.

[oliviertassinari]

You should get a warning now in v4.0.0-alpha.1.

[brianblakely]

The problem was a missing peer dependency issue, which I resolved by manually installing the latest JSS alpha (10.0.0-alpha.10).

npm WARN [email protected] requires a peer of jss@^10.0.0-alpha.3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of jss@^10.0.0-alpha.3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of jss@^10.0.0-alpha.3 but none is installed. You must install
peer dependencies yourself.
npm WARN [email protected] requires a peer of jss@^10.0.0-alpha.3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of jss@^10.0.0-alpha.3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of jss@^10.0.0-alpha.3 but none is installed. You must install peer dependencies yourself.

This seems like it should be affecting almost anyone using Box, so I'm confused why that doesn't appear to be the case.

[oliviertassinari]

@brianblakely Oh yeah, so it should be fixed with #14560.

[dwjohnston]

Fantastic. Does anyone know what causes this? For me, the error only starts happening when I started using typescript.

[devamir]

I am facing the same issue i tried with the above approaches but unable to resolve the error.
Uncaught TypeError: Object(...) is not a function at Array.onProcessRule (jss-plugin-vendor-prefixer.esm.js:14) at PluginsRegistry.onProcessRule (jss.esm.js:1219) at Array.forEach (<anonymous>) at RuleList.process (jss.esm.js:858) at new StyleSheet (jss.esm.js:1028) at Jss.createStyleSheet (jss.esm.js:1969) at attach (makeStyles.js:98) at makeStyles.js:237 at useSynchronousEffect (makeStyles.js:189) at makeStyles.js:229