[reactjs] TypeError : 정의되지 않은 makeStyles.js의 속성 ‘attach’을 읽을 수 없습니다

프로덕션 버전에서 MERN 앱의 로그인 구성 요소에 액세스하려고하면이 이미지에 다음과 같은 일련의 오류가 표시됩니다.

내 앱 ( https://github.com/ahaq0/kumon_schedule )은 로컬에서 완벽하게 작동하며 오늘 일찍 Heroku에서 완벽하게 호스팅되었습니다.

오늘 내가 만든 코드의 모든 변경 사항을 롤백하려고 시도했습니다. 마찬가지로 package.json (및 .lock)을 확인하여 재질 UI 종속성을 변경했는지 확인했지만 동일합니다. 호스팅 된 버전 에서 갑자기 작동하지 않는 이유를 알 수없는 것 같습니다 .

오류 줄의 코드는 다음과 같습니다. 그러나 소재 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;

이것은 첫 번째로 배포 된 응용 프로그램이며 롤백을 시도하는 최선의 시도에도 불구하고 모든 것이 작동에서 작동하지 않는 방식으로 손실됩니다.

편집하다. 오류 로그의 출처 인 Chrome뿐만 아니라 Firefox에서도 테스트했다고 언급해야합니다.

# 2를 편집하십시오. 더 많은 디버깅 후 Heroku를 통해 fccc55a5를 커밋하기 위해 롤백하면 오류가 사라지는 것을 알았습니다. 그러나 커밋으로 새 브랜치를 만들고 해당 브랜치를 배포하려고하면 작동하지 않습니다.

https://github.com/ahaq0/kumon_schedule/compare/fccc55a5…fccc55a5를 참조하십시오

Heroku의 마지막 빌드로 되 돌리면 작동합니다. 그러나 이전 커밋을 새 브랜치에 병합하고 배포하려고하면 그렇게하지 않습니다.

답변

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

{

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

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

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