TypeError : 정의되지 않은 makeStyles.js의 속성 'attach'을 읽을 수 없습니다


15

프로덕션 버전에서 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의 마지막 빌드로 되 돌리면 작동합니다. 그러나 이전 커밋을 새 브랜치에 병합하고 배포하려고하면 그렇게하지 않습니다.


이 문제가 해결 되었습니까?
Mike K

: 당신은 내 대답에 일시적으로 그것을 해결할 수 stackoverflow.com/a/59514748/3971297
알폰소 M. 가르시아 아스토르가

답변:


10

"jss": "10.0.0"을 "dependencies"에 추가 : {} 문제가 해결되었습니다.

--- 업데이트 30.12.19 ---

"jss"를 제거 할 수 있습니다.

버그가 수정되었습니다 :

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

1
이 문제가 발생하면 설치 한 material-ui 코어의 버전을 확인하고 업그레이드하거나 "^ 4.XX"를 사용하는 경우 node_modules와 package.lock을 제거하십시오. json 또는 yarn.lock.json 및 새로운 npm 설치 실행
Braulio

6

yarn나처럼 사용하는 경우 타겟팅 버전에 resolutions필드를 추가하여 해결할 수 있습니다 .package.jsonjss 10.0.0

package.json 다음과 같이 보일 것입니다 :

{

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

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

내가 너무 Github에서 내 솔루션을 공유 (그리고 다른 사람을 위해 일 것 같다) : https://github.com/mui-org/material-ui/issues/19005#issuecomment-569447204

그것도 당신을 위해 일한 경우 답변을 수락하십시오! :)


이것이 문제라는 것을 어떻게 알았습니까?
Mike K

2
jss 10.0.1버전이 재질 UI 단위 테스트를 중단시키는 주요 변경 사항을 게시 했기 때문에 @MikeK . 에서 더 많은 정보 : github.com/cssinjs/jss/issues/1249
알폰소 M. 가르시아 아스토르가


1

나는 같은 문제에 직면하고있다. @ material-ui / core ^ 4.4.0을 @ material-ui / core ^ 4.8.1로 업데이트했기 때문에 발생했습니다. 새 버전이나 버그가 변경되었을 수 있습니다. 최신 버전은 4 일 전에 릴리스되었으므로 아직 해결책이 없을 수 있습니다. 그러나 문제의 경우 @ material-ui / core ^ 4.4.0 또는 사용중인 이전 버전의 material-ui로 다운 그레이드하십시오. 이전 커밋으로 롤백 할 필요가 없습니다.


material-ui npm을 업데이트 한 후 모든 종속성을 업데이트하므로 다운 그레이드가 작동하지 않습니다. 더 좋은 해결책은 전체 "nodemodules"폴더를 삭제하고 package.jsonpackage-lock.json 을 이전 커밋과 동일한 파일 로 바꾸는 것 입니다 (업데이트 직전에 커밋). 그런 다음 npm 설치를 수행하면이 작업을 수행하고 모든 것이 올바르게 작동합니다.
Lalit Jharbade

1

문제는 jss와 Box 구성 요소에 있다고 생각합니다. @material-ui/core

수정 될 때까지 styled-componentsBox 구성 요소를 설치 하고 다시 작성했습니다.

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



-1

같은 문제에 직면. @ material-ui / core ^ 4.7.1에 있었고 잠금 파일과 node_modules를 실험하고 제거했습니다. 그런 다음 문제가 발생했습니다. 문제가 @ material-ui / styles 최신 버전 인 것 같습니다.

@ material-ui / core 업데이트를 4.6.1로 되돌리고 잠금 파일과 node_modules를 제거하고 패키지를 다시 설치하여 문제를 해결했습니다.


-1

빠른 해결 방법 : dynamicSheet.update (props)에서 '.attach ()'속성을 삭제하십시오. 그러나 프로덕션 환경에는 권장되지 않지만 모든 로컬 환경에 대한 빠른 수정입니다.


-1

npm 사용 :
1- node_modules 폴더 및 package-lock.json 파일 제거
2- package.json 파일 열기
3- 종속성 아래에서 이것을 변경하거나 추가하십시오 : "@ material-ui / core": "^ 4.6.1",
4- npm 나는
내 문제를 해결했다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.