mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.69k stars 32.23k forks source link

[docs] makeStyles demo is broken #13680

Closed joshwooding closed 5 years ago

joshwooding commented 5 years ago

Expected Behavior 🤔

makeStyles() codesandbox demo should work

Current Behavior 😯

It currently errors with: _react.default.useContext is not a function

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/0mpw102k00

Your Environment 🌎

Tech Version
Material-UI v3.5.1
React
Browser
TypeScript
etc.

Demo needs to be updated to use react 16.7.0 alpha

oliviertassinari commented 5 years ago

Demo needs to be updated to use react 16.7.0 alpha

@joshwooding Run warn and you should be good: https://github.com/mui-org/material-ui/blob/46cb140174ae40c4751cb49326157dc7fc499955/package.json#L131

joshwooding commented 5 years ago

@oliviertassinari https://codesandbox.io/s/0mpw102k00 I meant this demo. The docs demo works fine but the edit in codesandbox doesn't work

oliviertassinari commented 5 years ago

@joshwooding Oh right, people can't just click on the edit button, they also have to change the react version:

{
  "title": "Material demo",
  "description": "https://github.com/mui-org/material-ui/blob/master/docs/src/pages/css-in-js/basics/Hook.js",
  "dependencies": {
-   "react-dom": "latest",
-   "react": "latest",
+   "react-dom": "next",
+   "react": "next",
    "@material-ui/styles": "latest",
    "@material-ui/core": "latest"
  }
}
oliviertassinari commented 5 years ago

We can add an option for it, like this:

-{{"demo": "pages/css-in-js/basics/StyledComponents.js"}}
+{{"demo": "pages/css-in-js/basics/StyledComponents.js", "react": "next"}}
oliviertassinari commented 5 years ago

@joshwooding What do you think? Do you want to handle it? :)

joshwooding commented 5 years ago

@oliviertassinari I can have a go :)

mkaschke commented 5 years ago

@joshwooding - the Demo is still not working "_react.default.useContext is not a function"

joshwooding commented 5 years ago

@mkaschke The makeStyles demo works for me https://codesandbox.io/s/ywj9v6lz9v There's a reported issue with the other hook demos that should be fixed soon https://github.com/mui-org/material-ui/issues/14063

oliviertassinari commented 5 years ago

@mkaschke _react.default.useContext is not a function means that your React version doesn't support Hooks.

mkaschke commented 5 years ago

@joshwooding - your link works fine but the link on https://material-ui.com/demos/app-bar/ (under App Bar with menu) -> https://codesandbox.io/s/5kro05m06l is not working

mkaschke commented 5 years ago

@oliviertassinari - thank you for your answer, I already fixed it for my project.