TypeError: Impossible de lire la propriété 'attach' de makeStyles.js non défini


15

Lorsque j'essaie d'accéder au composant de connexion de mon application MERN sur la version de production, j'obtiens une série des erreurs de type suivantes affichées dans cette image:

entrez la description de l'image ici

Mon application ( https://github.com/ahaq0/kumon_schedule ) fonctionne parfaitement bien localement et fonctionnait parfaitement bien hébergée sur Heroku plus tôt dans la journée.

J'ai essayé d'annuler toutes les modifications du code que j'ai apportées aujourd'hui en vain. De même, j'ai vérifié le package.json (et .lock) pour voir si j'ai changé la dépendance matérielle de l'interface utilisateur, mais c'était la même chose. Je n'arrive pas à comprendre pourquoi cela a cessé de fonctionner soudainement sur la version hébergée ici .

Le code de la ligne de l'erreur est ci-dessous. Cependant, je n'ai pas écrit car cela fait partie de l'interface utilisateur matérielle.

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;

Ceci est ma première application déployée et je ne sais pas comment tout est passé de travailler à ne pas fonctionner malgré mes meilleures tentatives pour faire reculer les choses.

Éditer. Je dois mentionner que j'ai testé dans Firefox ainsi que dans Chrome d'où provient le journal des erreurs.

Modifier # 2. Après beaucoup de débogage, j'ai découvert que l'erreur avait disparu si je revenais pour valider fccc55a5 via Heroku. Cependant, si je crée une nouvelle branche avec ce commit et essaye de déployer cette branche, cela ne fonctionnera pas.

Veuillez voir ici https://github.com/ahaq0/kumon_schedule/compare/fccc55a5...fccc55a5

Lorsque je reviens à cette dernière version de Heroku, cela fonctionnera. Mais si je fusionne ce commit précédent dans une nouvelle branche et essaye de le déployer, ce ne sera pas le cas.


Était-ce réparé?
Mike K

Vous pouvez le résoudre temporellement avec ma réponse: stackoverflow.com/a/59514748/3971297
Alfonso M. García Astorga

Réponses:


10

Ajouter "jss": "10.0.0" aux "dépendances": {} a résolu le problème pour moi

--- Mis à jour le 30.12.19 ---

"jss" peut maintenant être supprimé,

bug a été corrigé dans:

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

1
Cela a fonctionné pour moi, merci, si vous rencontrez ce problème, vérifiez la version du matériel-ui core que vous avez installée, mettez-la à niveau (ou si vous utilisez "^ 4.XX"), supprimez simplement node_modules, plus package.lock. json ou yarn.lock.json et exécutez une nouvelle installation de npm
Braulio

6

Si vous utilisez yarncomme moi, vous pouvez le résoudre en ajoutant un resolutionschamp à votre version de package.jsonciblage jss 10.0.0.

package.json devrait ressembler à ceci:

{

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

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

J'ai également partagé ma solution sur Github (et il semble que cela a fonctionné pour d'autres): https://github.com/mui-org/material-ui/issues/19005#issuecomment-569447204

Veuillez accepter la réponse si cela a également fonctionné pour vous aussi! :)


Comment saviez-vous que c'était le problème?
Mike K

2
@MikeK, car la jss 10.0.1version a publié des modifications de rupture qui interrompent les tests unitaires de l'interface utilisateur matérielle. Plus d'infos sur: github.com/cssinjs/jss/issues/1249
Alfonso M. García Astorga

3

Dans mon cas, il a été résolu en supprimant le composant Box.


1

Je suis confronté au même problème. Cela s'est produit parce que j'ai mis à jour @ material-ui / core ^ 4.4.0 vers @ material-ui / core ^ 4.8.1. Il y a peut-être des changements de rupture dans la nouvelle version ou un bug. La dernière version est sortie il y a seulement quatre jours, il n'y a peut-être pas encore de solution. Mais pour votre problème, essayez de rétrograder vers @ material-ui / core ^ 4.4.0 ou la version précédente de material-ui que vous utilisiez, cela devrait fonctionner. Il n'est pas nécessaire de revenir aux validations précédentes.


Après la mise à jour du matériel-ui npm mettra à jour toutes ses dépendances, donc le simple déclassement ne fonctionnera pas. Une meilleure solution peut être de supprimer l'intégralité du dossier "nodemodules" et de remplacer package.json et package-lock.json par les mêmes fichiers de la validation précédente (validation juste avant la mise à jour). Ensuite, installez npm, je l'ai fait et tout fonctionne bien.
Lalit Jharbade

1

Je pense que le problème est avec jss et le composant Box dans @material-ui/core

Jusqu'à ce qu'il soit réparé, j'ai installé styled-componentset réécrit le composant 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

Face au même problème également. J'étais sur @ material-ui / core ^ 4.7.1, je suis juste allé expérimenter et supprimé le fichier de verrouillage et les node_modules. Ensuite, j'ai fait face au problème. Il semble que le problème soit sur les versions @ material-ui / styles up to date.

Résolu le problème en rétablissant la mise à jour de @ material-ui / core en 4.6.1, supprimé le fichier de verrouillage et node_modules, en réinstallant les packages.


-1

Solution rapide: supprimez la propriété '.attach ()' de dynamicSheet.update (props). Non recommandé pour les environnements de production, cependant, c'est une solution rapide pour tous les environnements de développement local.


-1

en utilisant npm:
1- supprimer le dossier node_modules et le fichier package-lock.json
2- ouvrir le fichier package.json
3- modifier ou ajouter ceci sous les dépendances: "@ material-ui / core": "^ 4.6.1",
4- npm j'ai
résolu mon problème.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.