TypeError: Die Eigenschaft 'attach' von undefined makeStyles.js kann nicht gelesen werden

Beim Versuch, in der Produktionsversion auf die Anmeldekomponente meiner MERN-App zuzugreifen, wird eine Reihe der folgenden in diesem Bild gezeigten Typfehler angezeigt:

Meine App ( https://github.com/ahaq0/kumon_schedule ) funktioniert lokal einwandfrei und hat heute auf Heroku einwandfrei funktioniert.

Ich habe versucht, alle Änderungen im Code, die ich heute vorgenommen habe, ohne Erfolg zurückzusetzen. In ähnlicher Weise habe ich die Datei package.json (und .lock) überprüft, um festzustellen, ob ich die Abhängigkeit der Material-Benutzeroberfläche geändert habe, aber das war dieselbe. Ich kann nicht herausfinden, warum es bei der gehosteten Version hier plötzlich nicht mehr funktioniert .

Der Code für die Fehlerzeile ist unten. Ich habe jedoch nicht geschrieben, da es Teil der materiellen Benutzeroberfläche ist.

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;

Dies ist meine erste bereitgestellte App, und ich bin ratlos, wie alles von der Arbeit zur Nicht-Arbeit überging, trotz meiner besten Versuche, die Dinge zurückzusetzen.

Bearbeiten. Ich sollte erwähnen, dass ich sowohl in Firefox als auch in Chrome getestet habe, woher das Fehlerprotokoll stammt.

Bearbeiten Sie # 2. Nach viel mehr Debugging stellte ich fest, dass der Fehler behoben ist, wenn ich zurücksetze, um fccc55a5 über Heroku festzuschreiben. Wenn ich jedoch mit diesem Commit einen neuen Zweig erstelle und versuche, diesen Zweig bereitzustellen, funktioniert dies nicht.

Bitte sehen Sie hier https://github.com/ahaq0/kumon_schedule/compare/fccc55a5...fccc55a5

Wenn ich zu diesem letzten Build in Heroku zurückkehre, wird es funktionieren. Wenn ich dieses vorherige Commit jedoch in einem neuen Zweig zusammenführe und versuche, es bereitzustellen, wird dies nicht der Fall sein.

Das Hinzufügen von "jss": "10.0.0" zu "Abhängigkeiten": {} hat das Problem für mich behoben

--- Aktualisiert am 30.12.19 ---

"jss" kann jetzt entfernt werden,

Fehler wurde behoben in:

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

Wenn Sie yarnwie ich verwenden, können Sie es lösen, indem Sie resolutionsIhrem package.jsonTargeting ein Feld hinzufügenjss 10.0.0 Version .

package.json sollte so aussehen:

{

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

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

Ich habe meine Lösung auch auf Github geteilt (und es scheint, dass sie für andere funktioniert hat): https://github.com/mui-org/material-ui/issues/19005#issuecomment-569447204

Bitte akzeptieren Sie die Antwort, wenn es auch bei Ihnen funktioniert hat! :) :)

In meinem Fall wurde es durch Entfernen der Box-Komponente behoben.

Ich stehe vor dem gleichen Problem. Es ist aufgetreten, weil ich @ material-ui / core ^ 4.4.0 auf @ material-ui / core ^ 4.8.1 aktualisiert habe. Es gibt möglicherweise wichtige Änderungen in der neuen Version oder einen Fehler. Die neueste Version wurde erst vor vier Tagen veröffentlicht, daher gibt es möglicherweise noch keine Lösung. Aber für Ihr Problem versuchen Sie, ein Downgrade auf @ material-ui / core ^ 4.4.0 oder die vorherige Version von material-ui durchzuführen, die Sie verwendet haben. Es sollte funktionieren. Es ist nicht erforderlich, ein Rollback auf vorherige Commits durchzuführen.

Ich denke, das Problem liegt bei jss und der Box-Komponente in @material-ui/core

Bis es behoben ist, habe ich styled-componentsdie Box-Komponente installiert und neu geschrieben:

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

Versuchen Sie ein Upgrade material-uiauf 4.8.1. Wenn es nicht funktioniert, fügen "jss": "10.0.0"Sie es package.jsonals vorübergehende Korrektur hinzu.

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

Das gleiche Problem auch. Ich war auf @ material-ui / core ^ 4.7.1, ich ging nur zum Experimentieren und entfernte die Sperrdatei und die Knotenmodule. Dann stand ich vor dem Problem. Das Problem scheint auf @ material-ui / styles aktuelle Versionen zu sein.

Das Problem wurde behoben, indem die Aktualisierung von @ material-ui / core auf 4.6.1 zurückgesetzt, die Sperrdatei und die Knotenmodule entfernt und die Pakete erneut installiert wurden.

Schnelle Problemumgehung: Löschen Sie die Eigenschaft '.attach ()' aus dynamicSheet.update (Requisiten). Für Produktions-Envs nicht ratsam, ist es jedoch eine schnelle Lösung für alle lokalen Entwickler-Envs.

Verwenden von npm:
1- Entfernen Sie den Ordner node_modules und die Datei package-lock.json.
2- Öffnen Sie die Datei package.json.
3- Ändern oder fügen Sie dies unter den Abhängigkeiten hinzu: "@ material-ui / core": "^ 4.6.1",
4- npm Ich habe
mein Problem gelöst.