类型错误:无法读取未定义的“attach”属性makeStyles.js

16

尝试访问我在生产版本上的MERN应用程序的登录组件时,我收到了一系列如此类型的错误,如此图像所示:

enter image description here

我的应用程序 (https://github.com/ahaq0/kumon_schedule) 在本地完全正常运行,并且今天早些时候在Heroku上托管时也完全正常。

我尝试回滚了所有我今天所做的代码更改,但都没有成功。同样,我检查了package.json(和.lock)以查看是否更改了Material UI依赖项,但是结果相同。我似乎无法理解为什么它在托管版本here突然停止工作。

下面是出错行的代码。但是,我没有编写这部分代码,因为它属于Material UI。

























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中进行了测试,其中错误日志来自Chrome。
编辑#2。经过更多调试,我发现如果通过Heroku回滚到提交fccc55a5,错误就会消失。但是,如果我使用该提交创建一个新分支并尝试部署该分支,则无法正常工作。
请参见此处: https://github.com/ahaq0/kumon_schedule/compare/fccc55a5...fccc55a5 当我将其还原为Heroku中的最后一个版本时,它将正常工作。但是,如果我将上一个提交合并到一个新分支中并尝试部署它,它将无法正常工作。

这个问题已经解决了吗? - Mike K
你可以暂时通过我的答案解决它:https://dev59.com/tlIH5IYBdhLWcg3weOUq#59514748 - Alfonso
9个回答

10

在我的情况下,将 "jss": "10.0.0" 添加到 "dependencies": { } 中解决了问题。

--- 2019年12月30日更新 ---

现在可以删除 "jss",已经修复了此漏洞:

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

1
那对我有效,谢谢。如果你遇到这个问题,请检查已安装的material-ui核心版本,升级它(或者如果你使用“^4.X.X”)只需移除node_modules,以及package.lock.json或yarn.lock.json文件,然后执行一个全新的npm安装。 - Braulio

6
如果您像我一样使用yarn包管理工具,那么您可以通过向package.json添加一个目标为jss 10.0.0版本的resolutions字段来解决这个问题。 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

如果这个方法对你也有用的话,请接受这个答案! :)


你是怎么知道这是问题的? - Mike K
2
@MikeK 因为 jss10.0.1 版本发布了破坏 Material UI 单元测试的重大更改。更多信息请参见:https://github.com/cssinjs/jss/issues/1249 - Alfonso

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.jsonpackage-lock.json 文件进行替换。然后运行 npm install 命令,我已经这样做了,一切都正常工作。 - Lalit Jharbade

1

1

我认为问题出在@material-ui/core中的jss和Box组件上。

在问题得到解决之前,我已经安装了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/core ^4.7.1,我尝试了一些实验,删除了锁定文件和node_modules,然后就遇到了问题。 看起来问题出在@material-ui/styles最新版本上。

通过将@material-ui/core回滚更新到4.6.1,并删除锁定文件和node_modules,再次安装软件包,问题得以解决。


-1
快速解决方法:从dynamicSheet.update(props)中删除属性'.attach()'。 不建议在生产环境中使用,但对于任何本地开发环境都是一个快速修复。

-1
使用npm:
1- 删除node_modules文件夹和package-lock.json文件
2- 打开package.json文件
3- 在dependencies下更改或添加以下内容: "@material-ui/core": "^4.6.1",
4- 运行npm i命令
这样就解决了我的问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接