TypeError:未定義のmakeStyles.jsのプロパティ 'attach'を読み取れません


15

製品版でMERNアプリのLoginコンポーネントにアクセスしようとすると、次のタイプの一連のエラーがこの画像に表示されます。

ここに画像の説明を入力してください

私のアプリ(https://github.com/ahaq0/kumon_schedule)はローカルで完全に正常に動作し、今日のHerokuでホストされている完全に正常に動作していました。

今日行ったコードの変更をすべてロールバックして、役に立たなかった。同様に、package.json(および.lock)をチェックして、マテリアルUIの依存関係を変更したかどうかを確認しましたが、同じでした。ここでホストされているバージョン突然動作しなくなった理由を理解できないようです。

エラーの行のコードは以下のとおりです。ただし、マテリアル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;

これは私の最初にデプロイしたアプリであり、物事をロールバックする最善の試みにもかかわらず、すべてが機能して機能しなくなったのに途方に暮れています。

編集。エラーログの送信元であるChromeだけでなく、Firefoxでもテストしたことを述べておきます。

#2を編集します。さらに多くのデバッグを行った後、Heroku経由でfccc55a5をコミットするようにロールバックするとエラーが発生しないことがわかりました。ただし、そのコミットで新しいブランチを作成し、そのブランチをデプロイしようとすると、機能しません。

こちらを ご覧くださいhttps://github.com/ahaq0/kumon_schedule/compare/fccc55a5...fccc55a5

Herokuの最後のビルドに戻すと、動作します。しかし、以前のコミットを新しいブランチにマージしてデプロイしようとしても、失敗します。


これは修正されましたか?
Mike K

あなたは私の答えでそれを一時的に解決できます:stackoverflow.com/a/59514748/3971297
Alfonso

回答:


10

「jss」:「10.0.0」を「依存関係」に追加:{}で問題が解決しました

--- 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私のように使用している場合はresolutionspackage.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

それもあなたのために働いたなら、答えを受け入れてください!:)


これが問題であることをどのようにして知りましたか?
Mike K

2
@MikeKは、jss 10.0.1Material UIユニットテストに違反する重大な変更がバージョンに公開されているためです。詳細:github.com/cssinjs/jss/issues/1249
アルフォンソM.ガルシアアストルガ


1

私も同じ問題に直面しています。@ material-ui / core ^ 4.4.0を@ material-ui / core ^ 4.8.1に更新したために発生しました。新しいバージョンでの重大な変更やバグがあるかもしれません。最新バージョンはわずか4日前にリリースされたため、まだ解決策がない可能性があります。ただし、問題が発生した場合は、@ material-ui / core ^ 4.4.0または使用していた旧バージョンのmaterial-uiにダウングレードしてみてください。以前のコミットにロールバックする必要はありません。


material-ui npmを更新すると、すべての依存関係が更新されるため、単純にダウングレードすることはできません。より良い解決策は、「nodemodules」フォルダ全体を削除し、package.jsonpackage-lock.jsonを以前のコミット(更新の直前にコミット)からの同じファイルで置き換えることです。次に、npm installを実行します。これを実行し、すべてが正常に動作しています。
Lalit Jharbade、

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 / 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-依存関係の下でこれを変更または追加: "@ material-ui / core": "^ 4.6.1"、
4- npm私は
自分の問題を解決しました。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.