TypeError: Невозможно прочитать свойство 'attach' из неопределенного makeStyles.js

15

При попытке получить доступ к компоненту «Вход» моего приложения MERN в рабочей версии я получаю серию следующих ошибок типа, показанных на этом изображении:

введите описание изображения здесь

Мое приложение ( https://github.com/ahaq0/kumon_schedule ) отлично работает локально и прекрасно работало, размещенное на Heroku ранее сегодня.

Я попытался откатить все изменения в коде, которые я сделал сегодня, но безрезультатно. Точно так же я проверил package.json (и .lock), чтобы увидеть, изменил ли я зависимость материала от пользовательского интерфейса, но это было то же самое. Я не могу понять, почему он вдруг перестал работать на размещенной здесь версии .

Код для строки ошибки приведен ниже. Тем не менее, я не писал, поскольку это является частью материала пользовательского интерфейса.

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;

Это мое первое развернутое приложение, и я в растерянности, как все перешло от работы к неработоспособности, несмотря на все мои попытки откатить назад.

Редактировать. Я должен упомянуть, что я проверял в Firefox так же как Chrome, откуда журнал ошибок.

Изменить № 2. После еще большей отладки я обнаружил, что ошибка исчезла, если я откатился на коммит fccc55a5 через Heroku. Однако, если я сделаю новую ветку с этим коммитом и попытаюсь развернуть эту ветку, она не будет работать.

Пожалуйста, смотрите здесь https://github.com/ahaq0/kumon_schedule/compare/fccc55a5...fccc55a5

Когда я вернусь к последней сборке в Heroku, она будет работать. Но если я объединю предыдущий коммит с новой веткой и попытаюсь развернуть его, он не будет.

невнятный
источник
Это было исправлено?
Майк К
Вы можете решить это временно с моим ответом: stackoverflow.com/a/59514748/3971297
Альфонсо М. Гарсия Асторга

Ответы:

10

Добавление "jss": "10.0.0" к "dependencies": {} исправило проблему для меня

--- Обновлено 30.12.19 ---

«JSS» теперь можно удалить,

ошибка была исправлена ​​в:

"@material-ui/core": "4.8.2",
Джута Хелм
источник
1
Это сработало для меня, спасибо, если вы решаете эту проблему, проверьте версию установленного вами ядра material-ui, обновите его (или, если вы используете «^ 4.XX»), просто удалите node_modules, а также package.lock. json или yarn.lock.json и выполните новую установку npm
Braulio
6

Если вы используете, yarnкак я, то вы можете решить эту проблему, добавив resolutionsполе к своей версии package.jsonтаргетинга jss 10.0.0.

package.json должен выглядеть так:

{

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

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

Я также поделился своим решением на Github (и, похоже, оно работало для других): https://github.com/mui-org/material-ui/issues/19005#issuecomment-569447204

Пожалуйста, примите ответ, если он также сработал для вас! :)

Альфонсо М. Гарсия Асторга
источник
Как вы узнали, что это проблема?
Майк К
2
@MikeK, потому что jss 10.0.1версия опубликовала критические изменения, которые нарушают модульные тесты пользовательского интерфейса. Больше информации на: github.com/cssinjs/jss/issues/1249
Альфонсо М. Гарсия Асторга
3

В моем случае это было решено удалением компонента Box.

неизвестный
источник
1

Я сталкиваюсь с той же проблемой. Это произошло потому, что я обновил @ material-ui / core ^ 4.4.0 до @ material-ui / core ^ 4.8.1. Там может быть серьезные изменения в новой версии или ошибка. Последняя версия была выпущена всего четыре дня назад, так что, возможно, решение еще не найдено. Но для вашей проблемы попробуйте понизить до @ material-ui / core ^ 4.4.0 или предыдущей версии material-ui, которую вы использовали, это должно работать. Откат к предыдущим коммитам не требуется.

Лалит Джарбаде
источник
После обновления material-ui npm обновит все его зависимости, поэтому простое понижение не будет работать. Лучшим решением может быть удаление всей папки «nodemodules» и замена package.json и package-lock.json теми же файлами из предыдущего коммита (коммит перед обновлением). Затем установите npm, я сделал это, и все работает нормально.
Лалит Джарбаде
1

Я думаю, что проблема с JSS и компонентом Box в @material-ui/core

Пока это не исправлено, я установил styled-componentsи переписал компонент 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

Попробуйте обновить material-uiдо 4.8.1. Если он не работает, добавьте "jss": "10.0.0"к вашему package.jsonкак временное решение.

Источник: https://github.com/mui-org/material-ui/issues/19005

Хьюго Диас
источник
1
Добавление "jss": "10.0.0"сработало для меня.
Майк К,
-1

Столкнувшись с той же проблемой, а также. Я был на @ material-ui / core ^ 4.7.1, я просто пошел на эксперимент и удалил файл блокировки и node_modules. Тогда я столкнулся с проблемой. Кажется, проблема в @ material-ui / styles в актуальных версиях.

Решил проблему, вернув обновление @ material-ui / core до 4.6.1, удалил файл блокировки и node_modules, снова установив пакеты.

Кент
источник
-1

Быстрый обходной путь: удалите свойство .attach () из dynamicSheet.update (props). Однако не рекомендуется для рабочих сред, но это быстрое решение для любых локальных разработчиков.

Z Hanson
источник
-1

используя npm:
1 - удалить папку node_modules и файл package-lock.json
2 - открыть файл package.json
3 - изменить или добавить его в зависимости: "@ material-ui / core": "^ 4.6.1",
4 - npm я
решил свою проблему

Али ХодайеДуст
источник