TypeError: Cannot read property 'attach' of undefined makeStyles.js

Question

When trying to access the Login component of my MERN app on the production version, I get a series of the following type errors shown in this image:

My app (https://github.com/ahaq0/kumon_schedule) works perfectly fine locally and was working perfectly fine hosted on Heroku earlier today.

I tried rolling back all of the changes in the code that I made today to no avail. Similarly, I checked the package.json (and .lock) to see if I changed the material UI dependency but that was the same. I can't seem to figure out why it stopped working all of a sudden on the hosted version here.

The code for the line of the error is below. However, I did not write as it's a part of material UI.

if (sheetManager.dynamicStyles) {
    var dynamicSheet = stylesOptions.jss.createStyleSheet(sheetManager.dynamicStyles, _extends({
        link: true
    }, options));
    dynamicSheet.update(props).attach();
    state.dynamicSheet = dynamicSheet;
    state.classes = mergeClasses({
        baseClasses: sheetManager.staticSheet.classes,
        newClasses: dynamicSheet.classes
    });

    if (sheetsRegistry) {
        sheetsRegistry.add(dynamicSheet);
    }
} else {
    state.classes = sheetManager.staticSheet.classes;
}

sheetManager.refs += 1;

This is my first deployed app and I'm at a loss how everything went from working to not working despite my best attempts to roll things back.

Edit. I should mention I tested in Firefox as well as Chrome where the error log is from.

Edit #2. After a lot more debugging I found out that the error is gone if I roll back to commit fccc55a5 via Heroku. However, if I make a new branch with that commit and try to deploy that branch, it will not work.

Please see here https://github.com/ahaq0/kumon_schedule/compare/fccc55a5...fccc55a5

When I revert to that last build in Heroku it will work. But if I merge that previous commit into a new branch and try to deploy it, it will not.

You can solve it temporally with my answer: https://stackoverflow.com/a/59514748/3971297 — Alfonso, Dec 28 '19 at 20:57

jouta helm · Answer 1 · 2019-12-30T15:07:55.643

10

Adding "jss": "10.0.0" to "dependencies": { } fixed the issue for me

--- Updated 30.12.19 ---

"jss" can now be removed,

bug has been fixed in:

"@material-ui/core": "4.8.2",

edited Dec 30 '19 at 15:07

answered Dec 28 '19 at 15:54

jouta helm

151
1
4

1

That worked for me, thanks, if you are hitting this issue, check the version of material-ui core you have installed, upgrade it (or if you are using "^4.X.X") just remove node_modules, plus package.lock.json or yarn.lock.json and execute a fresh npm install – Braulio Dec 30 '19 at 19:04

Alfonso · Answer 2 · 2019-12-28T20:56:03.633

6

If you're using yarn like me, then you can solve it by adding a resolutions field to your package.json targeting jss 10.0.0 version.

package.json should look like this:

{

  "dependencies": {
    "@material-ui/core": "^4.8.1",

  },
  "resolutions": {
    "jss": "10.0.0"
  }
}

I shared my solution on Github too (and seems it worked for others): https://github.com/mui-org/material-ui/issues/19005#issuecomment-569447204

Please accept the answer if it also worked for you too! :)

edited Dec 28 '19 at 20:56

answered Dec 28 '19 at 20:48

Alfonso

1,125
1
13
23

How did you know this was the issue? – Mike K Dec 30 '19 at 08:13
2

@MikeK because `jss` `10.0.1` version has published breaking changes that break Material UI unit tests. More info at: https://github.com/cssinjs/jss/issues/1249 – Alfonso Dec 31 '19 at 07:11

score 3 · Answer 3 · answered Dec 28 '19 at 10:09

3

In my case it was resolved by removing the Box component.

answered Dec 28 '19 at 10:09

unknown

31
1

score 1 · Answer 4 · answered Dec 28 '19 at 07:53

1

I am facing the same issue. It occured because I updated @material-ui/core^4.4.0 to @material-ui/core^4.8.1. There maybe breaking changes in the new version or a bug. The latest version has released just four days ago so there might not be a solution yet. But for your problem try downgrading to @material-ui/core^4.4.0 or the previous version of material-ui you were using, it should work. There is no need to rollback to previous commits.

answered Dec 28 '19 at 07:53

Lalit Jharbade

51
1
4

After updating the material-ui npm will update all it's dependencies so simply downgrading won't work. A better solution can be to delete the entire "nodemodules " folder and replace **package.json** and **package-lock.json** with same files from previous commit (commit just before update). Then do npm install, I did this and everything's working fine. – Lalit Jharbade Dec 28 '19 at 08:46

score 1 · Answer 5 · answered Dec 28 '19 at 10:25

I think the problem is with jss and the Box component in @material-ui/core

Until it's fixed, I have installed styled-components and rewrite the Box component:

import {
  borders,
  BordersProps,
  display,
  DisplayProps,
  flexbox,
  FlexboxProps,
  palette,
  PaletteProps,
  positions,
  PositionsProps,
  shadows,
  ShadowsProps,
  sizing,
  SizingProps,
  spacing,
  SpacingProps,
  typography,
  TypographyProps,
} from '@material-ui/system';
import styled from 'styled-components';

/*
 * Box with styled-components
 */
export const Box = styled.div<
  BordersProps & DisplayProps & FlexboxProps & PaletteProps & PositionsProps & ShadowsProps & SizingProps & SpacingProps & TypographyProps
>`${borders}${display}${flexbox}${palette}${positions}${shadows}${sizing}${spacing}${typography}`;

score 1 · Answer 6 · answered Dec 28 '19 at 12:20

1

Try upgrading material-ui to 4.8.1. If it does not work, add "jss": "10.0.0" to your package.json as a temporary fix.

Source: https://github.com/mui-org/material-ui/issues/19005

answered Dec 28 '19 at 12:20

Hugo Dias

169
3
14

score -1 · Answer 7 · answered Dec 28 '19 at 09:54

Facing the same issue as well. I was on @material-ui/core ^4.7.1, I just went to experiment and removed lock file and node_modules. Then I faced the problem. Seems the issue is on @material-ui/styles up to date versions.

Solved the problem by reverting updating @material-ui/core to 4.6.1, removed lock file and node_modules, installing packages again.

score -1 · Answer 8 · answered Dec 28 '19 at 19:57

-1

Quick workaround: delete the property '.attach()' from dynamicSheet.update(props). Not advisable for production envs, however, it's a quick-fix for any local-dev envs.

answered Dec 28 '19 at 19:57

Z Hanson

1
1

score -1 · Answer 9 · answered Dec 29 '19 at 10:51

-1

using npm :
1- remove node_modules folder and package-lock.json file
2- open package.json file
3- change or add this under dependencies : "@material-ui/core": "^4.6.1",
4- npm i
solved my problem.

answered Dec 29 '19 at 10:51

Ali KhodaieeDoost

33
3

TypeError: Cannot read property 'attach' of undefined makeStyles.js

9 Answers9