Material-ui: produksi build - konflik nama kelas

Saya telah melihat beberapa masalah seputar masalah ini. Itu selalu ditautkan ke instance generator className duplikat. Saya tidak dapat membantu lebih banyak tanpa reproduksi.

Saya menutup masalah untuk saat ini karena tidak dapat ditindaklanjuti. Beri tahu saya jika Anda memiliki contoh reproduksi.

@oliviertassinari Saya dapat mereproduksi masalah tersebut. Ini adalah webpack bin - https://www.webpackbin.com/bins/-KuO6ia3h-JDpBOJncZ3

Dalam kasus saya, saya memiliki 2 root aplikasi yang dipasang secara independen ke 2 div berbeda. Keduanya menggunakan bahan-ui yang sama ThemeProvider dibungkus dengan JssProvider untuk mengganti insertionPoint dari _jss_.

Berdasarkan fungsi createGenerateClassName , Anda menggunakan penghitung untuk memiliki nama kelas yang unik

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}`;
  };
}

Dan tangkapan layar saya menegaskan bahwa untuk beberapa alasan penghitung digandakan.

Saya butuh bantuan. Saya tidak tahu apa yang saya lakukan salah sekarang.

@darkowic Anda perlu membagikan instance jss di antara pohon react yang berbeda. Anda harus pandai dengan perubahan seperti itu.

@oliviertassinari Saya rasa saya melakukannya menggunakan kustom saya ThemeProvider

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

Saya membungkus setiap pohon reaksi saya dengan ini.

Masalah ini harus dibuka.

Tentu, mari kita simpulkan apa yang kita ketahui sejauh ini. Masalah ini muncul segera setelah Anda menggunakan beberapa pohon rendering reaksi. Penyedia jss akan membuat dua generator nama kelas, satu untuk setiap pohon. Karenanya kami berakhir dengan konflik nama kelas.
@kof Haruskah kita memperpanjang JssProvider dari react-jss untuk menerima generator nama kelas?

SOLUSI untuk aplikasi sisi klien: Anda dapat membuat sendiri createGenerateClassName dan memindahkan ruleCounter luar fungsi pembungkus

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}`;
  };
}

Bagus, kami memiliki kasus penggunaan seperti itu di server dan saya sudah merencanakan untuk petunjuk yang berani di dokumentasi lihat # 5

Tetapi sekarang Anda benar-benar menemukan alasan yang bagus untuk mendukung 2 penyedia yang menjalankan paralel.

Kita perlu meneliti jika ada kasus penggunaan untuk kebutuhan yang kuat dari beberapa JssProviders paralel. Jika ada, kita perlu memikirkan sesuatu untuk mendukungnya.

@kof Anda baru saja menemukan kasus penggunaan untuk beberapa JssProviders paralel di sisi klien. Dan saya pikir solusi yang diusulkan mudah untuk diterapkan :).

pindahkan ruleCounter di luar fungsi pembungkus

Ini berarti bahwa di server, ruleCounter tidak akan pernah disetel ulang. Kami tidak bisa melakukan itu.

Di sisi server, JssProviders pasti perlu mendukung rendering asinkron konkuren dari pohon react (sangat dibutuhkan). Tetapi implementasi saat ini membuatnya sudah didukung :)

@darkowic Mengusulkan solusi yang tidak memiliki akses ke tumpukan yang mendasarinya. Kami melakukannya. Kita dapat melakukan lebih baik dengan fleksibilitas ekstra ini: menerima instance pembuat nama kelas.

Juga permintaan ke titik akhir yang sama harus selalu merespons dengan nama kelas yang sama.

@kof Haruskah kita memperluas JssProvider dari react-jss untuk menerima generator nama kelas?

1. Ya, satu cara yang mungkin adalah mengizinkan JssProvider menerima generator nama kelas seperti ini:

import {createGenerateClassName} from 'react-jss'

const generateClassName = createGenerateClassName()

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

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

1. Opsi potensial lainnya adalah memberikan beberapa awalan, seperti nama aplikasi. Ini dapat berfungsi jika kami menganggap kami tidak memiliki jumlah aplikasi yang tidak dapat diprediksi.

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

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

Pro 1:

• Pengguna tidak perlu memberikan awalan

Pro 2:

• Pengguna dapat memiliki sesuatu yang berarti dalam nama kelas DOM yang mengidentifikasi aplikasi selama pengembangan
• Pengguna memiliki lebih banyak kontrol tentang awalan.
• Relatif mudah untuk memiliki awalan yang tidak berkonflik. Entah Anda hanya memiliki beberapa subpohon dan penamaannya sudah cukup mudah atau Anda dapat menambahkan prefiks nomor Anda sendiri ke nama-nama itu dan mengatur ulangnya pada setiap permintaan.

Sebenarnya masuk akal untuk memiliki kedua props classNamePrefix dan generateClassName . Pertama untuk debugging, kedua untuk keunikan otomatis nama kelas.

Saya mengalami masalah ini melalui https://github.com/facebookincubator/create-react-app/issues/3173 (dan kasus uji terkait yang

Dalam kasus saya, komponen yang bergantung pada UI material (v1.0.0-beta.11) dimasukkan ke dalam aplikasi yang juga menggunakan material-ui (versi yang sama). Dalam pengembangan, ini berfungsi dengan baik, tetapi dalam produksi, tata letak rusak karena nama kelas yang bentrok.

Saya tidak yakin apakah ini memenuhi syarat sebagai "beberapa pohon rendering reaksi" dan memindahkan var ruleCounter = 0; sebelum createGenerateClassName() _did tidak_ menyelesaikan masalah, tetapi mengomentari yang berikut, _did_ berfungsi:

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

Maaf, saya tidak bisa memberikan info lebih lanjut saat saya membuka # 7855.😊
Komentar ini pada dasarnya mencakup masalah yang saya hadapi saat menjalankan produksi build.

Solusi untuk ini sedang dalam proses?

Membuat PR yang seharusnya memperbaikinya di react-jss https://github.com/cssinjs/react-jss/pull/155

Jadi mari kita simpulkan.

• @darkowic 's penyebab masalah akar dijelaskan di sini: https://github.com/callemall/material-ui/issues/8223#issuecomment -331.076.580 dan akan tetap berkat @kof' s PR: cssinjs / bereaksi-JSS # 155 dan peringatan baru akan ditambahkan untuk mencegah situasi ini di masa mendatang: # 8341.

• Gejala masalah @tlvince sama, tetapi akar penyebabnya berbeda. Anda menggunakan pohon render reaksi tunggal. Itu bisa ditautkan ke versi Material-UI duplikat yang diinstal. Periksa peringatan Anda dan jika Anda dapat mengetahui dengan tepat apa yang terjadi, buka edisi lain.

• Masalah @Robophil terlalu kabur untuk ditindaklanjuti.

Saya memiliki nama kelas yang bertabrakan dan menambahkan awalan di createGenerateClassName options memecahkan masalah.

Menggunakan dokumen hebat dan komprehensif di sini

@oliviertassinari terima kasih atas ringkasannya!

Dalam pohon render react tunggal, masalah ini kemungkinan besar disebabkan oleh versi material-ui yang berbeda dalam build Anda. Pastikan untuk memeriksa pohon ketergantungan Anda dan memeriksa versi material-ui yang digunakan.

yarn list | grep material-ui

Konfigurasi webpack saya adalah sebagai berikut

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

Saya memiliki dua komponen ini dan komponen umum yang dibangun menggunakan opsi splitChunks.
Saya membungkus komponen default yang diekspor di MyFirstComp dan MySecondComp menggunakan JSSProvider.
Bagaimana saya harus menggunakan JSSProvider di sekitar komponen umum?

@Sewdn Saya juga berpikir ini bisa disebabkan oleh versi material-ui yang berbeda. Masalah konflik className ini diperkenalkan di aplikasi saya kemarin ketika saya mulai bermigrasi ke hook dan hook useStyles yang dibuat oleh makeStyles dari @ material-ui / styles yang ada di 3.0.0-alpha.1
Saya juga menggunakan "@ material-ui / core" yang ada di 3.6.0

Tiba-tiba kelas aplikasi saya dan kelas material-ui keduanya dimulai dengan jss1, menghitung secara paralel. Itu akan mencampuradukkan semuanya. Header saya misalnya dengan jss5 juga ditata dengan jss5 misalkan MuiListItem.

Setelah mengikuti solusi ini https://github.com/mui-org/material-ui/issues/8223#issuecomment -412349569 oleh @iamhosseindhv kelas komponen mui diawali dengan ac dan masalah telah diselesaikan.

@christiaanwesterbeek Apakah Anda menggunakan langkah penginstalan dengan benar? Kami menggunakan injeksi ketergantungan. install() call harus dijalankan sebelum semua komponen tingkat tinggi diimpor.

@oliviertassinari Saya khawatir saya tidak tahu langkah apa yang Anda maksud. Juga, saya tidak tahu bagian dari install() dan di mana ia perlu dipanggil. Saya akan senang untuk mempelajarinya lebih lanjut, tapi saya perlu tahu dimana itu didokumentasikan.

@christiaanwesterbeek yang saya maksud adalah https://material-ui.com/css-in-js/basics/#migration -for-material-ui-core-users.

@oliviertassinari Tampaknya install() harus dipanggil di setiap file komponen? Mungkin kita butuh penjelasan yang lebih jelas.

Mungkin saya salah, instal tidak dapat menyelesaikan konflik.
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 Bagaimana cara menginstalnya before importing any Material-UI's components ?
import selalu ditangani oleh babel dan tsc secara statis

Impor modul bootstrap.js dan mengimpornya terlebih dahulu:
https://github.com/mui-org/material-ui/blob/cb30b43e9c6cd49f9b16536a125456f5ea3a85c5/docs/src/modules/components/bootstrap.js#L1 -L13
Jika masalah terus berlanjut, mari beralih ke diskusi ke masalah lain.

@oliviertassinari Saya memindahkan pesanan impor dari

// 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'

untuk

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

kode melaporkan kesalahan Cannot read property 'text' of undefined . Dengan memeriksa objek tema, itu kosong.
Jika saya mengembalikan urutan impor, bagian ini berfungsi dengan baik.

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

Masalah yang sama terjadi ketika saya membungkus seluruh aplikasi dengan <StylesProvider>

@bayu_joo

kode melaporkan kesalahan Cannot read property 'text' of undefined . Dengan memeriksa objek tema, itu kosong.

Saya memiliki masalah yang sama. Itu diperbaiki dengan mengupgrade "@ material-ui / core" ke 3.6.0 atau @ material-ui / styles yang menjadi 3.0.0-alpha.1. Saya lupa yang mana. Lebih baik lakukan keduanya.

Namun tema persis yang akan diterima fungsi yang diteruskan ke makeStyles, bukanlah tema yang saya buat dengan createMuiTheme. Sebaliknya, ia mendapat tema default. Apa yang akhirnya saya lakukan adalah tidak bergantung pada tema apa pun yang akan dilewati. Sebagai gantinya saya mengimpor tema di setiap file yang gaya membutuhkannya.

@christiaanwesterbeek Saya telah menginstal @material-ui/[email protected] dan @material-ui/styles/.0.0-alpha.2 dan masih mengalami masalah ini.

Ini sepertinya tidak ada hubungannya dengan masalah (8223) yang sedang dihadapi. Tapi ini dia. Cukup impor tema dan jangan mengandalkan itu diteruskan ke fungsi yang Anda berikan ke makeStyles . Dan Anda sudah selesai.

Adakah yang bisa memastikan apakah langkah pemasangan masih diperlukan dengan v3.7.0 (https://github.com/mui-org/material-ui/releases/tag/v3.7.0)

@christiaanwesterbeek ya, itu wajib. Kami akan menghapus langkah instalasi di Material-UI v4.

@oliviertassinari hei, saya mengalami masalah ini dengan v3.9.0 terbaru, dan saya tidak menggunakan @ material-ui / styles, saya masih menggunakan withStyles dari core Saya punya dua pertanyaan .

1. haruskah saya bermigrasi sekarang ke mui / styes atau menunggu rilis v4. (aplikasi skala besar)
2. menggunakan solusi ini https://github.com/mui-org/material-ui/issues/8223#issuecomment -331081785 adalah cara yang tepat untuk menangani masalah ini? itu berfungsi dengan baik pada akhirnya, tetapi tampaknya tidak dapat memahami mengapa hal itu terjadi di tempat pertama.

Terima kasih

Saya mengalami masalah ini dengan v3.9.0 terbaru

@ w3nda Ini terlalu umum, ada jutaan alasan berbeda untuk masalah ini terjadi.

haruskah saya bermigrasi sekarang ke mui / styes atau menunggu rilis v4. (aplikasi skala besar)

Kita mungkin mengembalikan logika pencirian nama kelas. Meskipun sangat meningkatkan kinerja di server, ini memiliki biaya yang signifikan pada klien. Mungkin kami akan memberikan bendera untuk mengaktifkannya. Jadi tidak, menurut saya pilihan terbaik adalah menyelesaikan masalah inti. Apakah Anda mencoba halaman ini https://material-ui.com/guides/server-rendering/#troubleshooting ?

@oliviertassinari Terima kasih atas tanggapan yang cepat, saya benar-benar tidak tahu cara men-debug masalah dan tautan yang Anda sebutkan tidak relevan bagi saya karena saya menyajikannya sebagai situs statis ..
Komentar yang saya referensikan membantu saya, bukankah seharusnya komentar itu memberi tahu penyebab masalah ini dalam kasus saya?

Situs web @ w3nda Statis memiliki masalah yang sama. Anda perlu membuat HTML, sehingga itu akan menggunakan API rendering sisi server. Jika penghitung indeks bocor di antara dua halaman, nama kelas tidak akan benar. Yah, menurut saya generator nama kelas yang lebih lambat adalah tradeoff yang baik dibandingkan dengan rasa sakitnya men-debug masalah seperti itu (& seberapa sering itu). Jadi, ya, Anda dapat meningkatkan ke @material-ui/styles , ini jalan keluar yang sederhana.

Saya baru saja mengalami masalah serupa dan itu adalah impor material-ui lama yang ada di salah satu perpustakaan kami. Ini bekerja dengan baik dalam mode pengembangan tetapi rusak dalam produksi. Saya cukup yakin ini berhasil sebelumnya, saya tidak tahu apakah peringatan dapat dikeluarkan dalam kasus ini, bahkan jika itu jelas kesalahan kami.
Saya memperbarui versi untuk mencocokkannya di antara proyek dan semuanya bekerja lagi.

Hai, Saya menggunakan materi hanya untuk satu masukan, tombol, dan formulir di situs saya dan saya harus menggunakan <JssProvider /> mengikuti komentar ini https://github.com/mui-org/material-ui/issues / 8223 # penerbitan -331412432

Membutuhkan penyedia jss ini menjengkelkan, apakah ada perbaikan lain yang dapat kita lakukan yang tidak akan meningkatkan ukuran build akhir?

@kopax Untuk apa Anda menggunakan JssProvider ?

Hai @oliviertassinari , Dalam production sebelum mengunjungi rute lain (kami menggunakan react-router):

Di production setelah mengunjungi rute atau di development

Hal serupa di sini terjadi dengan formulir (bayangan kotak aneh), kita perlu mengunjungi halaman lain untuk mendapatkan css yang tepat, yang hanya terjadi dalam produksi:

Kedua masalah diperbaiki jika kita menambahkan JssProvider . (diperbaiki: kami memiliki css yang sama di production daripada di development )

Saya tidak punya ide. Saya tidak dapat membantu dengan informasi yang diberikan.

Semuanya juga rusak. Saya mengamati urutan yang salah jssXX kelas dalam produksi dan akibatnya gaya salah. Itu terjadi setelah menyegarkan halaman.

Belum bisa menemukan alasannya.

@oliviertassinari mungkin nomor versi yang digunakan oleh [email protected] yang kami gunakan akan membantu Anda memberi tahu kami apa yang terjadi:

        "@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",

Bisakah Anda memastikan bahwa Material-UI hanya dibundel sekali ? Menggunakan dua versi secara bersamaan dapat membuat perilaku buggy yang sama.

Baik. Itu mungkin. Kami menggunakan react-admin yang merekomendasikan versi ~ 1.5.

Saya memecahkan bug pada produksi dengan menambahkan JssProvider . Sekarang saya dapat menyegarkan halaman secara normal.

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 inilah yang kami coba hindari, kami lebih suka menggunakannya tanpa JssProvider karena kami hanya menggunakan satu Input dan Button komponen dari @ material-ui , sebagai gantinya kami lebih memilih untuk menggunakan ui lain untuk react-admin.

@oliviertassinari Saya baru saja memeriksa dan saya memang memiliki beberapa masalah ketergantungan. Saya memperbaikinya tetapi masih mendapatkan kesalahan dengan npm ls @material-ui/core :

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

Setelah melakukan:

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] 

Kemudian sekarang berfungsi (tidak ada masalah css dalam produksi). Saya kira ini bukan yang saya inginkan ...

Ketergantungan proyek @ material-ui terkait:

• @ bootstrap-style / [email protected]/package.json#L293
• [email protected]/package.json#L44

Ada ide untuk dilakukan?

@kopax Sulit untuk mengatakan tanpa sesuatu yang dapat saya debug. Saya senang mendengarnya berfungsi sekarang.

Saya perhatikan Anda menggunakan komponen bergaya dengan Material-UI. Jika Anda punya waktu, saya ingin berbicara tentang integrasi di Gitter.

Solusi yang berhasil tidak alami. Artinya, ini melibatkan tugas yang tidak dapat dijalankan dengan npm. Saya tidak akan menggunakannya, saya memberikan ini sebagai petunjuk.

Kita punya kesempatan hari Senin, saya akan bergabung dengan saluran mui gitter.

Hai @kopax , apakah Anda berhasil menemukan solusi?

Tidak, belum. Bukan tanpa provider. @oliviertassinari Saya di gitter.

@andrewkslv Solusi Anda benar-benar berhasil untuk saya. Saya juga menggunakan react-admin dan AWS Amplify. Kapan pun saya akan menerapkan aplikasi react saya ke S3 bucket, gayanya akan rusak, dan solusi Anda benar-benar menyelamatkan saya.

Masalah yang sama di sini. Mengapa menambahkan JssProvider membantu?

Saya telah menambahkan peringatan di v4 untuk memperingatkan ketika contoh gaya duplikat digunakan: # 15422.

Saya tidak tahu. Saya mengangkat masalah ini di react-admin ketika mereka menerapkan versi baru materi ui ke kerangka kerja tetapi diabaikan.

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

Di mana saya dapat menemukan solusi tentang konflik produksi build - classnames # 8223?

Terima kasih,

@oliviertassinari Menghadapi masalah ini lagi, meskipun saya telah mengikuti semua petunjuk. Karena berfungsi untuk orang lain, saya rasa saya mungkin kehilangan sesuatu yang mendasar.

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

Saya menggunakan versi berikut dari paket.

"@ 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"

Pembaruan: Masalah teratasi. Maaf karena tidak membaca dokumentasi secara menyeluruh. Bagian dari dokumentasi ini memecahkan masalah saya.

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

Tapi entah bagaimana, solusi JSSProvider yang berfungsi untuk semua orang lain, tidak berhasil untuk saya. Bagaimanapun, terima kasih :)

Terima kasih @KannugoPrvi , ini adalah solusi yang bagus! https://material-ui.com/styles/api/#creategenerateclassname -options-class-name-generator