Material-ui: makeStyles stopped working

[webface]

I have been working on a project for 3 weeks with the same depencies even deployed to server. Now all of a sudden I get error during dev and build

  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.27",
    "@fortawesome/free-brands-svg-icons": "^5.12.1",
    "@fortawesome/free-regular-svg-icons": "^5.12.1",
    "@fortawesome/free-solid-svg-icons": "^5.12.1",
    "@fortawesome/react-fontawesome": "^0.1.8",
    "@material-ui/core": "^4.9.5",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/styles": "^4.9.0",
    "@material-ui/system": "^4.9.3",
    "@mui-treasury/layout": "^3.3.3",
    "@mui-treasury/mockup": "^0.4.5",
    "axios": "^0.19.2",
    "dotenv": "^8.2.0",
    "moment": "^2.24.0",
    "mui-layout": "^1.2.9",
    "next": "^9.2.2",
    "next-compose-plugins": "^2.2.0",
    "next-transpile-modules": "^3.1.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-moment": "^0.9.7",
    "react-reveal": "^1.2.2"
  },

Current Behavior 😯

Fails to build with error:

 ready ] compiled successfully - ready on http://localhost:3000
[ event ] build page: /profile
[ wait ]  compiling ...
[ error ] ./node_modules/@material-ui/styles/esm/makeStyles/makeStyles.js
Attempted import error: 'getDynamicStyles' is not exported from 'jss'.
get initial props
api_url http://localhost:3018
Could not find files for /profile in .next/build-manifest.json
TypeError: (0 , _jss.getDynamicStyles) is not a function
    at attach (/Applications/MAMP/htdocs/PROJECTS/src/frontend/node_modules/@material-ui/styles/makeStyles/makeStyles.js:131:60)

Expected Behavior 🤔

Should build as usual

Steps to Reproduce 🕹

Steps:

1.
2.
3.
4.

Context 🔦

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.?.? |
| React | |
| Browser | |
| TypeScript | |
| etc. | |

[webface]

Could not find files for /index in .next/build-manifest.json
TypeError: (0 , _jss.getDynamicStyles) is not a function

It was working fine for weeks then this

[Marcioshub]

I'm also having this issue.

[webface]

Failed to compile
./node_modules/@material-ui/styles/esm/makeStyles/makeStyles.js
Attempted import error: 'getDynamicStyles' is not exported from 'jss'.

[mglaman]

Same as #20132

[mglaman]

jss v10.1.1 released which fixes this

[webface]

@mglaman I dont see a fix on that post

[Vadorequest]

https://github.com/cssinjs/jss/pull/1303 author has released a fix, I just tested it and confirm it works now as it did before.

[mglaman]

Confirming it fixes things as well (thx @Vadorequest for tracking it down)

[webface]

@Vadorequest @mglaman how do i fix it in my project?

[Vadorequest]

Reinstall your dependencies. That should do the trick.

[albertoZurini]

Reinstalling dependencies doesn't work for me. I've removed @material-ui/core from package.json, then removed node_modules, then npm i @material-ui/core -s, but I still got

Failed to compile.

./node_modules/@material-ui/styles/esm/makeStyles/makeStyles.js
Attempted import error: 'getDynamicStyles' is not exported from 'jss'.

[Vadorequest]

It's not core, it's styles

@material-ui/styles

[albertoZurini]

I'm facing this issue in core library. I've just installed it and I got this error after using this sample code:

import Button from '@material-ui/core/Button';

<Button variant="contained" color="primary">
Hello World
</Button>

[albertoZurini]

Managed to solve (I don't know how). Here my package.json:

{
  "name": "training_react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.9.5",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/styles": "^4.9.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "jss": "^10.1.1",
    "node-sass": "^4.13.1",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-dropzone": "^10.2.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

[oliviertassinari]

Closing as a duplicate of #20132