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

问题

First post here and I'm on wits end, any help would be kindly appreciated.

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.

    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.

回答1:

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! :)

回答2:

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",

回答3:

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

回答4:

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.

回答5:

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}`;

回答6:

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

回答7:

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.

回答8:

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.

回答9:

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.

来源：https://stackoverflow.com/questions/59508171/typeerror-cannot-read-property-attach-of-undefined-makestyles-js