TypeError: impossibile leggere la proprietà 'attach' di makeStyles.js non definito


15

Quando provo ad accedere al componente Login della mia app MERN sulla versione di produzione, ottengo una serie dei seguenti errori di tipo mostrati in questa immagine:

inserisci qui la descrizione dell'immagine

La mia app ( https://github.com/ahaq0/kumon_schedule ) funziona perfettamente a livello locale e funzionava perfettamente bene ospitata su Heroku oggi.

Ho provato a ripristinare tutte le modifiche al codice che ho apportato oggi inutilmente. Allo stesso modo, ho controllato package.json (e .lock) per vedere se ho cambiato la dipendenza dell'interfaccia utente materiale, ma era lo stesso. Non riesco a capire perché abbia smesso di funzionare all'improvviso sulla versione ospitata qui .

Il codice per la riga dell'errore è di seguito. Tuttavia, non ho scritto poiché fa parte dell'interfaccia utente materiale.

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;

Questa è la mia prima app distribuita e non riesco a capire come tutto sia andato dal funzionare al non funzionare nonostante i miei migliori tentativi di ripristinare le cose.

Modificare. Dovrei menzionare che ho provato su Firefox e Chrome da dove proviene il registro degli errori.

Modifica n. 2. Dopo molto più debug ho scoperto che l'errore scompare se eseguo il rollback per eseguire il commit di fccc55a5 tramite Heroku. Tuttavia, se creo un nuovo ramo con quel commit e provo a distribuire quel ramo, non funzionerà.

Si prega di consultare qui https://github.com/ahaq0/kumon_schedule/compare/fccc55a5...fccc55a5

Quando tornerò all'ultima build di Heroku funzionerà. Ma se unisco il precedente commit in un nuovo ramo e provo a distribuirlo, non lo farà.


È stato risolto?
Mike K,

Puoi risolverlo temporaneamente con la mia risposta: stackoverflow.com/a/59514748/3971297
Alfonso M. García Astorga,

Risposte:


10

Aggiungendo "jss": "10.0.0" a "dipendenze": {} risolto il problema per me

--- Aggiornato il 30.12.19 ---

"jss" ora può essere rimosso,

il bug è stato corretto in:

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

1
Per me ha funzionato, grazie, se stai risolvendo questo problema, controlla la versione di material-ui core che hai installato, aggiornalo (o se stai usando "^ 4.XX") basta rimuovere node_modules, più package.lock. json o yarn.lock.json ed esegui una nuova installazione di npm
Braulio il

6

Se stai usando yarncome me, puoi risolverlo aggiungendo un resolutionscampo alla tua versione di package.jsontargeting jss 10.0.0.

package.json dovrebbe apparire così:

{

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

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

Ho condiviso anche la mia soluzione su Github (e sembra funzionare per altri): https://github.com/mui-org/material-ui/issues/19005#issuecomment-569447204

Accetta la risposta se ha funzionato anche per te! :)


Come sapevi che questo era il problema?
Mike K,

2
@MikeK perché la jss 10.0.1versione ha pubblicato modifiche che interrompono i test delle unità dell'interfaccia utente del materiale. Maggiori informazioni su: github.com/cssinjs/jss/issues/1249
Alfonso M. García Astorga


1

Sto affrontando lo stesso problema. Si è verificato perché ho aggiornato @ material-ui / core ^ 4.4.0 a @ material-ui / core ^ 4.8.1. Potrebbero esserci delle interruzioni nella nuova versione o un bug. L'ultima versione è stata rilasciata solo quattro giorni fa, quindi potrebbe non esserci ancora una soluzione. Ma per il tuo problema prova a eseguire il downgrade a @ material-ui / core ^ 4.4.0 o alla versione precedente di material-ui che stavi utilizzando, dovrebbe funzionare. Non è necessario eseguire il rollback ai commit precedenti.


Dopo aver aggiornato il material-ui npm aggiornerà tutte le sue dipendenze, quindi semplicemente il downgrade non funzionerà. Una soluzione migliore può essere quella di eliminare l'intera cartella "nodemodules" e sostituire package.json e package-lock.json con gli stessi file del commit precedente (commit appena prima dell'aggiornamento). Quindi installare npm, ho fatto questo e tutto funziona bene.
Lalit Jharbade,

1

Penso che il problema sia con jss e il componente Box dentro @material-ui/core

Fino a quando non viene risolto, ho installato styled-componentse riscritto il componente 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

Affrontare anche lo stesso problema. Ero su @ material-ui / core ^ 4.7.1, sono appena andato a sperimentare e ho rimosso il file di blocco e node_modules. Quindi ho affrontato il problema. Sembra che il problema sia su @ material-ui / styles versioni aggiornate.

Risolto il problema ripristinando l'aggiornamento @ material-ui / core alla 4.6.1, rimosso il file di blocco e node_modules, installando nuovamente i pacchetti.


-1

Soluzione rapida: elimina la proprietà '.attach ()' da dynamicSheet.update (props). Non consigliabile per gli ambienti di produzione, tuttavia, è una soluzione rapida per qualsiasi ambiente di sviluppo locale.


-1

usando npm:
1- rimuovete la cartella node_modules e il file package-lock.json
2- aprite il file package.json
3- cambiate o aggiungete questo in dipendenze: "@ material-ui / core": "^ 4.6.1",
4- npm ho
risolto il mio problema.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.