TypeError: Nie można odczytać właściwości „attach” niezdefiniowanego pliku makeStyles.js


15

Podczas próby uzyskania dostępu do komponentu logowania mojej aplikacji MERN w wersji produkcyjnej pojawia się seria następujących błędów typu pokazanych na tym obrazie:

wprowadź opis zdjęcia tutaj

Moja aplikacja ( https://github.com/ahaq0/kumon_schedule ) działa idealnie lokalnie i działała doskonale dobrze hostowana na Heroku już dziś.

Próbowałem wycofać wszystkie zmiany w kodzie, które wprowadziłem dzisiaj, ale bezskutecznie. Podobnie sprawdziłem plik package.json (i .lock), aby sprawdzić, czy zmieniłem zależność materialnego interfejsu użytkownika, ale było tak samo. I nie wydaje się, aby dowiedzieć się, dlaczego przestał działać nagle od wersji obsługiwanej tutaj .

Kod wiersza błędu znajduje się poniżej. Nie pisałem jednak, ponieważ jest to część materialnego interfejsu użytkownika.

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;

To moja pierwsza wdrożona aplikacja i nie wiem, jak wszystko poszło od pracy do niedziałania, pomimo moich najlepszych prób wycofania.

Edytować. Powinienem wspomnieć, że testowałem w Firefoksie, a także w Chrome, z którego pochodzi dziennik błędów.

Edytuj # 2. Po dużo więcej debugowaniu dowiedziałem się, że błąd zniknął, jeśli wycofam się, aby zatwierdzić fccc55a5 przez Heroku. Jednak jeśli utworzę nowy oddział z tym zatwierdzeniem i spróbuję wdrożyć ten oddział, to nie zadziała.

Zobacz tutaj https://github.com/ahaq0/kumon_schedule/compare/fccc55a5...fccc55a5

Kiedy powrócę do ostatniej wersji Heroku, będzie działać. Ale jeśli scalę poprzednie zatwierdzenie w nowy oddział i spróbuję go wdrożyć, nie zrobi tego.


Czy to naprawiono?
Mike K

Możesz rozwiązać to tymczasowo dzięki mojej odpowiedzi: stackoverflow.com/a/59514748/3971297
Alfonso M. García Astorga

Odpowiedzi:


10

Dodanie „jss”: „10.0.0” do „zależności”: {} naprawiło problem

--- Zaktualizowano 30.12.19 ---

„jss” można teraz usunąć,

błąd został naprawiony w:

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

1
To działało dla mnie, dziękuję, jeśli napotykasz ten problem, sprawdź wersję zainstalowanego rdzenia material-ui, zaktualizuj go (lub jeśli używasz „^ 4.XX”), po prostu usuń moduły node_mod plus plus pakiet.lock. json lub yarn.lock.json i wykonaj nową instalację npm
Braulio

6

Jeśli używasz tak yarnjak ja, możesz to rozwiązać, dodając resolutionspole do wersji package.jsonkierowania jss 10.0.0.

package.json powinien wyglądać tak:

{

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

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

Udostępniłem również moje rozwiązanie na Github (i wydaje się, że zadziałało dla innych): https://github.com/mui-org/material-ui/issues/19005#issuecomment-569447204

Proszę przyjąć odpowiedź, jeśli ona również zadziałała dla Ciebie! :)


Skąd wiedziałeś, że to jest problem?
Mike K

2
@MikeK, ponieważ jss 10.0.1wersja opublikowała przełamujące zmiany, które psują testy jednostkowe interfejsu użytkownika materiału. Więcej informacji na: github.com/cssinjs/jss/issues/1249
Alfonso M. García Astorga

3

W moim przypadku problem został rozwiązany przez usunięcie komponentu Box.


1

Mam do czynienia z tym samym problemem. Wystąpiło, ponieważ zaktualizowałem @ material-ui / core ^ 4.4.0 do @ material-ui / core ^ 4.8.1. Być może nastąpiły przełomowe zmiany w nowej wersji lub błąd. Najnowsza wersja została wydana zaledwie cztery dni temu, więc może nie być jeszcze rozwiązania. Ale w przypadku problemu spróbuj obniżyć wersję do @ material-ui / core ^ 4.4.0 lub poprzedniej wersji material-ui, której używasz, powinno działać. Nie ma potrzeby przywracania poprzednich zatwierdzeń.


Po zaktualizowaniu material-ui npm zaktualizuje wszystkie swoje zależności, więc po prostu obniżenie wersji nie będzie działać. Lepszym rozwiązaniem może być usunięcie całego folderu „nodemodules” i zastąpienie package.json i package-lock.json tymi samymi plikami z poprzedniego zatwierdzenia (zatwierdzenie tuż przed aktualizacją). Następnie zainstaluj npm, zrobiłem to i wszystko działa dobrze.
Lalit Jharbade,

1

Myślę, że problem dotyczy jss i komponentu Box @material-ui/core

Do czasu rozwiązania problemu zainstalowałem styled-componentsi przepisałem składnik Box:

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

W obliczu tego samego problemu. Byłem na @ material-ui / core ^ 4.7.1, po prostu poszedłem eksperymentować i usunąłem plik blokady i moduły_węzła. Potem stanąłem przed problemem. Wygląda na to, że problem dotyczy aktualnych wersji @ material-ui / styles.

Rozwiązano problem, przywracając aktualizację @ material-ui / core do 4.6.1, usunięto plik blokady i moduły node_modu, instalując ponownie pakiety.


-1

Szybkie obejście: usuń właściwość „.attach ()” z dynamicSheet.update (rekwizyty). Nie jest to zalecane w przypadku środowisk produkcyjnych, jednak jest to szybka poprawka dla wszystkich lokalnych środowisk deweloperów.


-1

przy użyciu npm:
1- usuń folder node_modules i plik package-lock.json
2- otwórz plik package.json
3- zmień lub dodaj to w zależności: „@ material-ui / core”: „^ 4.6.1”,
4 npm I
rozwiązać mój problem.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.