TypeError: Não é possível ler a propriedade 'anexar' do makeStyles.js indefinido


15

Ao tentar acessar o componente Login do meu aplicativo MERN na versão de produção, recebo uma série dos seguintes erros de tipo mostrados nesta imagem:

insira a descrição da imagem aqui

Meu aplicativo ( https://github.com/ahaq0/kumon_schedule ) funciona perfeitamente localmente e estava funcionando perfeitamente bem hospedado no Heroku hoje cedo.

Tentei reverter todas as alterações no código que fiz hoje sem sucesso. Da mesma forma, verifiquei o package.json (e o .lock) para ver se havia alterado a dependência material da interface do usuário, mas era a mesma. Não consigo entender por que parou de funcionar de repente na versão hospedada aqui .

O código para a linha do erro está abaixo. No entanto, não escrevi, pois faz parte da interface do usuário do material.

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;

Este é o meu primeiro aplicativo implantado e não sei como tudo passou do trabalho para o trabalho, apesar das minhas melhores tentativas de reverter as coisas.

Editar. Devo mencionar que testei no Firefox e no Chrome, de onde é o registro de erros.

Edite # 2. Depois de muito mais depuração, descobri que o erro desapareceu se eu reverter para confirmar o fccc55a5 via Heroku. No entanto, se eu criar um novo ramo com esse commit e tentar implantá-lo, ele não funcionará.

Consulte aqui https://github.com/ahaq0/kumon_schedule/compare/fccc55a5...fccc55a5

Quando eu voltar para a última compilação no Heroku, ele funcionará. Mas se eu mesclar esse commit anterior em uma nova ramificação e tentar implantá-lo, isso não acontecerá.


Isso foi consertado?
Mike K

Você pode resolvê-lo temporariamente com a minha resposta: stackoverflow.com/a/59514748/3971297 #
Alfonso M. García Astorga

Respostas:


10

A adição de "jss": "10.0.0" a "dependências": {} corrigiu o problema para mim

--- Atualizado 30.12.19 ---

"jss" agora pode ser removido,

bug foi corrigido em:

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

11
Isso funcionou para mim, obrigado. Se você está enfrentando esse problema, verifique a versão do material-ui core que você instalou, atualize-o (ou se estiver usando "^ 4.XX"), remova o node_modules e o package.lock. json ou yarn.lock.json e execute uma nova instalação do npm
Braulio

6

Se você estiver usando yarncomo eu, poderá resolvê-lo adicionando um resolutionscampo à sua versão de package.jsonsegmentação jss 10.0.0.

package.json deve ficar assim:

{

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

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

Também compartilhei minha solução no Github (e parece que funcionou para outros): https://github.com/mui-org/material-ui/issues/19005#issuecomment-569447204

Aceite a resposta se ela também funcionou para você! :)


Como você sabia que esse era o problema?
Mike K

2
@MikeK porque a jss 10.0.1versão publicou alterações de última hora que quebram os testes de unidade da UI do material. Mais informações em: github.com/cssinjs/jss/issues/1249
Alfonso M. García Astorga


1

Eu estou enfrentando o mesmo problema. Ocorreu porque atualizei @ material-ui / core ^ 4.4.0 para @ material-ui / core ^ 4.8.1. Talvez haja mudanças na nova versão ou um bug. A versão mais recente foi lançada há apenas quatro dias, portanto talvez ainda não haja uma solução. Mas, para o seu problema, tente fazer o downgrade para @ material-ui / core ^ 4.4.0 ou a versão anterior do material-ui que você estava usando, ele deve funcionar. Não há necessidade de reverter para confirmações anteriores.


Após a atualização, o material-ui npm atualizará todas as suas dependências, portanto, simplesmente a desatualização não funcionará. Uma solução melhor pode ser excluir toda a pasta "nodemodules" e substituir package.json e package-lock.json pelos mesmos arquivos da confirmação anterior (confirmação imediatamente antes da atualização). Então instale o npm, eu fiz isso e tudo está funcionando bem.
Lalit Jharbade

1

Eu acho que o problema está com o jss e o componente Box @material-ui/core

Até que seja corrigido, eu instalei styled-componentse reescrevi o 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

Enfrentando o mesmo problema também. Eu estava no @ material-ui / core ^ 4.7.1, acabei de experimentar e removi o arquivo de bloqueio e o node_modules. Então eu enfrentei o problema. Parece que o problema está em @ material-ui / styles versões atualizadas.

Resolvido o problema revertendo a atualização @ material-ui / core para 4.6.1, removendo o arquivo de bloqueio e o node_modules, instalando pacotes novamente.


-1

Solução rápida: exclua a propriedade '.attach ()' de dynamicSheet.update (props). Não é aconselhável para envs de produção, no entanto, é uma solução rápida para envs de desenvolvedores locais.


-1

using npm:
1- remova a pasta node_modules e o arquivo package-lock.json
2- abra o arquivo package.json
3- altere ou inclua isto nas dependências: "@ material-ui / core": "^ 4.6.1",
4- npm eu
resolvi meu problema.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.