Material-ui: プロダクションビルド-クラス名の競合

私はすでにこの問題に関するいくつかの

私は今のところ問題を解決できないとして閉じています。 複製例があれば教えてください。

@oliviertassinari問題を再現することができました。 これがwebpackビンです-https ： //www.webpackbin.com/bins/-KuO6ia3h-JDpBOJncZ3

私の場合、2つの異なるdivに個別にマウントされる2つのアプリケーションルートがあります。 どちらも同じマテリアルを使用します-ui ThemeProviderをJssProviderラップして、_jss_のinsertionPointをオーバーライドします。

createGenerateClassName関数に基づいて、カウンターを使用して一意のクラス名を設定します

export default function createGenerateClassName(): generateClassName {
  let ruleCounter = 0;

  return (rule: Rule, sheet?: StyleSheet): string => {
    ruleCounter += 1;
    warning(
      ruleCounter < 1e10,
      [
        'Material-UI: you might have a memory leak.',
        'The ruleCounter is not supposed to grow that much.',
      ].join(''),
    );

    if (process.env.NODE_ENV === 'production') {
      return `c${ruleCounter}`;
    }

    if (sheet && sheet.options.meta) {
      return `${sheet.options.meta}-${rule.key}-${ruleCounter}`;
    }

    return `${rule.key}-${ruleCounter}`;
  };
}

そして私のスクリーンショットは、何らかの理由でカウンターが複製されていることを確認しています。

私は助けが必要です。 今何が間違っているのかわかりません。

@darkowic異なる反応ツリー間でjssインスタンスを共有する必要があります。 あなたはそのような変化にうまくいくはずです。

@oliviertassinariカスタムThemeProviderを使用してやっていると思います

  <JssProvider registry={context.sheetsRegistry} jss={context.jss}>
    <MuiThemeProvider
      theme={context.theme}
      sheetManage={context.sheetsManager}
      {...props}
    />
  </JssProvider>

私はすべての反応ツリーをこれで包みます。

この問題は開かれるべきです。

確かに、これまでにわかっていることを要約しましょう。 この問題は、複数の反応レンダリングツリーを使用するとすぐに発生します。 jssプロバイダーは、ツリーごとに1つずつ、2つのクラス名ジェネレーターを作成します。 したがって、クラス名の競合が発生します。
@kofクラス名ジェネレーターを受け入れるためにJssProviderをreact-jssから拡張する必要がありますか？

クライアント側アプリケーションの回避策：独自のcreateGenerateClassNameを作成し、 ruleCounterラッパー関数の外に移動できます

import warning from 'warning';

// Returns a function which generates unique class names based on counters.
// When new generator function is created, rule counter is reset.
// We need to reset the rule counter for SSR for each request.
//
// It's an improved version of
// https://github.com/cssinjs/jss/blob/4e6a05dd3f7b6572fdd3ab216861d9e446c20331/src/utils/createGenerateClassName.js
//
// Copied from material-ui due to issue https://github.com/callemall/material-ui/issues/8223

// This counter is moved outside from `createGenerateClassName` to solve the issue
let ruleCounter = 0;

export default function createGenerateClassName() {
  return (rule, sheet) => {
    ruleCounter += 1;
    warning(
      ruleCounter < 1e10,
      [
        'Material-UI: you might have a memory leak.',
        'The ruleCounter is not supposed to grow that much.'
      ].join('')
    );

    if (process.env.NODE_ENV === 'production') {
      return `c${ruleCounter}`;
    }

    if (sheet && sheet.options.meta) {
      return `${sheet.options.meta}-${rule.key}-${ruleCounter}`;
    }

    return `${rule.key}-${ruleCounter}`;
  };
}

いいですね。サーバーにそのようなユースケースがあり、ドキュメントで大胆なヒントを得る予定でした。 ＃5を参照してください。

しかし今、あなたは実際に2つの並列実行プロバイダーをサポートする正当な理由を見つけました。

複数の並列JssProviderが強く必要なユースケースがあるかどうかを調査する必要があります。 もしあれば、それをサポートする何かを考える必要があります。

@kofクライアント側で複数の並列JssProviderのユースケースを見つけました。 そして、提案されたソリューションは実装が簡単だと思います:)。

ruleCounterをラッパー関数の外に移動します

これは、サーバー上でruleCounterがリセットされないことを意味します。 それはできません。

サーバー側では、JssProvidersは間違いなくreactツリーの同時非同期レンダリングをサポートする必要があります（強いニーズ）。 しかし、現在の実装ではすでにサポートされています:)

@darkowic基になるスタックにアクセスできない回避策を提案しました。 します。 この追加の柔軟性、つまりクラス名ジェネレーターインスタンスを受け入れることで、より良い結果が得られます。

また、同じエンドポイントへのリクエストは、常に同じクラス名で応答する必要があります。

@kofクラス名ジェネレーターを受け入れるためにreact-jssからJssProviderを拡張する必要がありますか？

1. ええ、1つの可能な方法は、JssProviderが次のようなクラス名ジェネレーターを受け入れることを許可することです。

import {createGenerateClassName} from 'react-jss'

const generateClassName = createGenerateClassName()

<JssProvider generateClassName={generateClassName}>
  <App1 />
</JssProvider>

<JssProvider generateClassName={generateClassName}>
  <App2 />
</JssProvider>

1. 別の潜在的なオプションは、アプリケーション名などのプレフィックスを提供することです。 これは、予測できない量のアプリケーションがないと仮定した場合に機能する可能性があります。

<JssProvider classNamePrefix="app-1">
  <App1 />
</JssProvider>

<JssProvider classNamePrefix="app-2">
  <App2 />
</JssProvider>

プロ1：

• ユーザーはプレフィックスを指定する必要はありません

プロ2：

• ユーザーは、開発中にアプリを識別するDOMクラス名に意味のあるものを含めることができます
• ユーザーはプレフィックスをより細かく制御できます。
• 競合しないプレフィックスを付けるのは比較的簡単です。 サブツリーがいくつかあり、名前付けはすでに十分に簡単であるか、それらの名前に独自の番号プレフィックスを追加して、要求ごとにリセットすることができます。

実際には、両方の小道具classNamePrefixとgenerateClassNameを持つことは理にかなっています。 1つ目はデバッグ用、2つ目はクラス名の自動一意性用です。

https://github.com/facebookincubator/create-react-app/issues/3173 （およびリンクされた縮小テストケース）を介してこの問題に遭遇しました。

私の場合、マテリアルUIに依存するコンポーネント（v1.0.0-beta.11）が、 material-ui（同じバージョン）も使用ていまし

これが「複数の反応レンダリングツリー」として適格であり、 var ruleCounter = 0;前にcreateGenerateClassName() var ruleCounter = 0;を移動することが問題の回避策ではなかったかどうかcreateGenerateClassName()わかりませんが、次のようにコメントアウトします。

https://github.com/callemall/material-ui/blob/2361339fd6df9bfbb85ed2ee4da9d42ee6fee71c/src/styles/createGenerateClassName.js#L26 -L28

申し訳ありませんが、＃7855を開いた時点ではこれ以上の情報を提供できませんでした。😊
このコメントは基本的に、本番ビルドを実行するときに直面した問題をカバーしています。

パイプラインでこれを回避するにはどうすればよいですか？

これをreact-jsshttps ：//github.com/cssinjs/react-jss/pull/155で修正する必要があるPRを作成しました

それでは、要約しましょう。

• @darkowicの問題の根本的な原因は、ここで説明されていますhttps://github.com/callemall/material-ui/issues/8223#issuecomment -331076580と固定されます@kofに感謝のPR：cssinjsは/反応し、JSS＃ 155と、将来この状況を防ぐために新しい警告が追加されます：＃8341。

• @tlvinceの問題の症状は同じですが、根本的な原因は異なります。 単一のreactレンダーツリーを使用しています。 インストールされている複製されたMaterial-UIバージョンにリンクされている可能性があります。 警告を確認し、何が起こっているのかを正確に把握できる場合は、別の問題を開いてください。

• @Robophilの問題はあいまいすぎて、実行できません。

クラス名が衝突し、 createGenerateClassNameオプションにプレフィックスを追加すると、問題が解決しました。

ここで素晴らしい包括的なドキュメントを使用し

@oliviertassinari要約をありがとう！

単一のreactレンダーツリーでは、この問題はビルド内の異なるmaterial-uiバージョンが原因である可能性があります。 依存関係ツリーを確認し、使用されているmaterial-uiバージョンを確認してください。

yarn list | grep material-ui

私のwebpackの設定は次のとおりです

module.exports = {
    entry: {
        FirstComp: path.join(paths.JS, '/components/FirstComponent/MyFirstComp.js'),
        SecondComp: path.join(paths.JS, '/components/SecondComponent/MySecondComp.js'),
    },
}

これらの2つのコンポーネントと、splitChunksオプションを使用して構築された共通のコンポーネントがあります。
JSSProviderを使用して、デフォルトのエクスポートされたコンポーネントをMyFirstCompとMySecondCompでラップしました。
共通コンポーネントの周りでJSSProviderをどのように使用する必要がありますか？

@Sewdnまた、さまざまなマテリアルUIバージョンが原因である可能性もあると思います。 このclassNameの競合の問題は、昨日、フックと、3.0.0-alpha.1にある@ material-ui / stylesからmakeStylesによって作成されたuseStylesフックへの移行を開始したときにアプリで発生しました。
また、3.6.0の「@ material-ui / core」を使用していました。

突然、私のアプリクラスとmaterial-uiクラスの両方がjss1で始まり、並行してカウントアップしました。 それはすべてを混乱させるでしょう。 たとえばjss5を使用した私のヘッダーも、たとえばMuiListItemのjss5を使用してスタイル設定されました。

この解決策に従った後、@ iamhosseindhvによってhttps://github.com/mui-org/material-ui/issues/8223#issuecomment -412349569が使用され、 muiコンポーネントのクラスのプレフィックスがacになり、問題が解決されました。

@christiaanwesterbeekインストール手順を正しく使用していますか？ 依存性注入を使用します。 install()呼び出しは、すべての高次コンポーネントをインポートする前に実行する必要があります。

@oliviertassinari申し訳ありませんが、どのステップを参照しているのかわかりません。 また、 install()が何の一部であり、どこで呼び出す必要があるのか​​わかりません。 それについてもっと知りたいのですが、どこに文書化されているかを知る必要があります。

@christiaanwesterbeek私はhttps://material-ui.com/css-in-js/basics/#migration-for-material-ui-core-usersを参照してい

@oliviertassinari install()はすべてのコンポーネントのファイルで呼び出される必要があるようですか？ もっと明確な説明が必要かもしれません。

たぶん私は間違っています、インストールは競合を解決できません。
To switch from the default style implementation to this newest version, you need to execute the following code before importing any Material-UI's components:

import { install } from '@material-ui/styles';

install();

@oliviertassinariインストール方法before importing any Material-UI's components ？
インポートは常にbabelとtscによって静的に処理されます

@zheeeng ESモジュールのインポートはモジュールのbootstrap.jsモジュールにパッケージ化し、最初にインポートすること
https://github.com/mui-org/material-ui/blob/cb30b43e9c6cd49f9b16536a125456f5ea3a85c5/docs/src/modules/components/bootstrap.js#L1 -L13
問題が解決しない場合は、別の問題のディスカッションに移りましょう。

@oliviertassinariインポート注文をから移動しました

// entry index.js
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import CssBaseline from '@material-ui/core/CssBaseline'
import { install } from '@material-ui/styles'

に

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { install } from '@material-ui/styles'
import CssBaseline from '@material-ui/core/CssBaseline'

コードはエラーCannot read property 'text' of undefined報告します。 テーマオブジェクトを検査すると、空になります。
インポート順序を元に戻すと、この部分は正常に機能します。

const useStyles = makeStyles(
  (theme: Theme) => ({
    root: {
      flexShrink: 0,
      color: theme.palette.text.secondary,
    },
  }),
)

アプリケーション全体を<StylesProvider>ラップすると、同じ問題が発生します

@zheeeng

コードはエラーCannot read property 'text' of undefined報告します。 テーマオブジェクトを検査すると、空になります。

私も同じ問題を抱えていました。 「@ material-ui / core」を3.6.0にアップグレードするか、@ material-ui / stylesを3.0.0-alpha.1にアップグレードすることで修正されました。 どちらか忘れました。 両方を行う方がよい。

ただし、makeStylesに渡された関数が受け取る正確なテーマは、createMuiThemeで作成したテーマではありませんでした。 代わりに、デフォルトのテーマを取得しました。 私がやったことは、通過するテーマに依存しないことでした。 代わりに、スタイルに必要なすべてのファイルにテーマをインポートしました。

@christiaanwesterbeek @material-ui/[email protected]と@material-ui/styles/.0.0-alpha.2をインストールしましたが、まだこの問題があります。

これは、目前のこの問題（8223）とは無関係のようです。 しかし、とにかくここに行きます。 テーマをインポートするだけで、 makeStyles渡す関数に渡されることに依存しないでください。 これで完了です。

誰かがv3.7.0でインストール手順がまだ必要かどうかを確認できますか（https://github.com/mui-org/material-ui/releases/tag/v3.7.0）

@christiaanwesterbeekはい、必須です。 Material-UIv4のインストール手順を削除します。

@oliviertassinariねえ、私は最新のv3.9.0でこの問題を経験しています、そして私は@ material-ui / stylesを使用していません、私はまだwithStylesからcoreを使用しています2つの質問があります。

1. 今すぐmui / styesに移行するか、v4のリリースを待つ必要があります。 （大規模アプリ）
2. この回避策を使用するhttps://github.com/mui-org/material-ui/issues/8223#issuecomment-331081785は、この問題を処理する適切な方法ですか？ 最終的にビルドでは正常に機能しますが、そもそもなぜそれが起こっているのか理解できないようです。

ありがとう

最新のv3.9.0でこの問題が発生しています

@ w3ndaこれは一般的すぎます。この問題が発生する理由は、

今すぐmui / styesに移行するか、v4のリリースを待つ必要があります。 （大規模アプリ）

クラス名のハッシュロジックを元に戻す可能性があります。 サーバーのパフォーマンスは大幅に向上しますが、クライアントにはかなりのコストがかかります。 代わりに、それを有効にするフラグを提供するかもしれません。 いいえ、最善の選択肢はコアの問題を解決することだと思います。 このページhttps://material-ui.com/guides/server-rendering/#troubleshootingを試しましたか？

@oliviertassinari迅速な対応に感謝します。問題をデバッグする方法が本当にわかりません。静的サイトとして機能しているため、あなたが言及したリンクは私には関係ありません。
私が参照したコメントが私を助けてくれたのですが、私の場合、この問題の原因を教えてくれませんか？

@ w3nda静的Webサイトにも同じ問題があります。 HTMLを生成する必要があるため、サーバー側のレンダリングAPIが使用されます。 2ページ間でインデックスカウンターがリークすると、クラス名が正しくなくなります。 そうですね、クラス名ジェネレーターが遅いことは、そのような問題をデバッグするのが苦痛である（そしてそれがどれほど頻繁であるか）のと比較して、良いトレードオフだと思います。 だから、はい、あなたは@material-ui/stylesにアップグレードすることができます、それは単純なエスケープハッチです。

私はちょうど同様の問題を抱えていました、そしてそれは私たちのライブラリの1つにあった古いmaterial-uiインポートでした。 開発モードでは正常に動作しましたが、本番環境では機能しませんでした。 これは以前は機能していたと確信しています。この場合、明らかに私たちのせいであっても、警告が発行されるかどうかはわかりません。
プロジェクト間でバージョンを一致させるようにバージョンを更新しましたが、すべてが再び機能しました。

こんにちは、私は自分のサイトで単一の入力、ボタン、フォームにのみマテリアルを使用しています。このコメントに続いて<JssProvider />を使用する必要がありましたhttps://github.com/mui-org/material-ui/issues / 8223＃issuecomment -331412432

このjssプロバイダーが必要になるのは面倒ですが、最終的なビルドサイズを増加させない別の修正方法はありますか？

@kopax JssProviderを何に使用していますか？

こんにちは@oliviertassinari 、別のルートにアクセスする前にproduction （react-routerを使用します）：

ルートを訪れた後のproductionまたはdevelopment

ここで似たようなことがフォーム（奇妙なボックスの影）で発生します。適切なcssを取得するには、別のページにアクセスする必要があります。これは本番環境でのみ発生します。

JssProviderを追加すると、両方の問題が修正されます。 （修正済み： developmentと同じcssがproductionあります）

何も思いつきません。 私は提供された情報を手伝うことはできません。

すべても壊れています。 プロダクションで間違った順序のjssXXクラスを観察し、その結果、間違ったスタイルを確認します。 これは、ページを更新した後に発生します。

まだ理由が見つかりません。

@oliviertassinariおそらく、私たちが使用している

        "@material-ui/core": "^1.4.0",
        "@material-ui/icons": "^1.0.0",
        "material-ui-chip-input": "1.0.0-beta.6 - 1.0.0-beta.8",

Material-UIが1回だけバンドルされていることを確認できますか？ 2つのバージョンを同時に使用すると、同じバグのある動作が発生する可能性があります。

上手。 それが可能だ。 推奨バージョン〜1.5のreact-adminを使用しています。

JssProvider追加して、本番環境のバグを解決しました。 これで、ページを正常に更新できます。

import React from "react";
import { Admin, Resource } from "react-admin";
import JssProvider from "react-jss/lib/JssProvider";

const App = () => (
  <JssProvider>
    <Admin dataProvider={dataProvider}>
      <Resource name="trip" list={RequestsList} className="resourceItem" />
    </Admin>
  </JssProvider>
);

export default App;

@andrewkslvこれはまさに私たちが避けようとしていることです。@ material-uiのButtonコンポーネントとInputつだけ使用するため、 JssProviderなしで使用することをお勧めします。代わりに、残りの部分には、react-admin用の別のUIを使用することをお勧めします。

@oliviertassinari確認したところ、依存関係の問題がいくつかありました。 私はそれをnpm ls @material-ui/coreエラーが発生しました：

├─┬ @bootstrap-styled/[email protected]
│ └── @material-ui/[email protected] 
├── @material-ui/[email protected] 
└─┬ [email protected]
  └── @material-ui/[email protected] 

行った後：

rm -rf node_modules/@bootstrap-styled/ra-ui/node_modules/@material-ui/
rm -rf node_modules/ra-ui-materialui/node_modules/@material-ui/
npm ls @material-ui/core
├─┬ @bootstrap-styled/[email protected]
│ └── UNMET DEPENDENCY @material-ui/[email protected] 
├── @material-ui/[email protected] 
└─┬ [email protected]
  └── UNMET DEPENDENCY @material-ui/[email protected] 

その後、動作します（本番環境ではcssの問題はありません）。 これは私が望むものではないと思います...

関連プロジェクト@ material-uiの依存関係：

• @ bootstrap-styled / ra - ui @ 1.0.23 / package.json＃L293
• [email protected]/package.json#L44

何をすべきか考えていますか？

@kopaxデバッグできるものがないと

Material-UIでstyled-componentsを使用していることに気づきました。 時間があれば、Gitterでの統合についてお話ししたいと思います。

実用的な解決策は自然ではありません。 つまり、npmでは実行できないタスクが含まれます。 私はそれを使用しません、私はこれをヒントとして与えました。

月曜日にチャンスがあります。muigitterチャンネルに参加します。

こんにちは@kopax 、あなたは解決策を見つけることができましたか？

いいえ、まだです。 プロバイダーなしではありません。 @oliviertassinari私は苦手です。

@andrewkslvあなたのソリューションは本当に私のために働いた。 react-adminとAWSAmplifyも使用しています。 私がreactアプリケーションをS3バケットにデプロイするときはいつでも、スタイルはすべて壊れていて、あなたのソリューションは本当に私を救いました。

ここで同じ問題。 JssProviderを追加すると役立つのはなぜですか？

重複したスタイルインスタンスが使用されたときに警告する警告をv4に追加しました：＃15422。

知りません。 フレームワークに新しいバージョンのマテリアルUIを実装しているときに、この問題をreact-admin発生させましたが、無視されました。

https://github.com/marmelab/react-admin/pull/3102#issuecomment -484228320

本番ビルドに関する解決策はどこにありますか？クラス名の競合＃8223？

ありがとう、

@oliviertassinariすべての指示に従ったにもかかわらず、この問題に再び直面しています。 それは他の人のために働いているので、私は私が基本的な何かを逃しているかもしれないと思います。

https://stackoverflow.com/questions/58938080/jssprovider-not-generate-class-prefix-with-classnameprefix

次のバージョンのパッケージを使用しています。

"@ material-ui / core"： "^ 4.6.1"、
"@ material-ui / icons"： "^ 4.5.1"、
"react"： "^ 16.12.0"、
"react-dom"： "^ 16.12.0"、
"react-jss"： "^ 10.0.0"、
"react-scripts"： "3.2.0"

更新：問題は解決されました。 ドキュメントを完全に読んでいないことをお詫びします。 ドキュメントのこの部分は私の問題を解決しました。

https://material-ui.com/styles/api/#creategenerateclassname -options-class-name-generator

しかし、どういうわけか、他のすべてのために機能していたJSSProviderソリューションは私のために機能していませんでした。 とにかく、ありがとう:)

@KannugoPrithviに感謝しhttps://material-ui.com/styles/api/#creategenerateclassname -options-class-name-generator