Halaman saya berisi kode yang sangat mendasar ini:
import React from 'react'
import styled from 'styled-components'
const Title = styled.h1`
color: pink;
font-size: 50px;
`
export default () => <Title>My page</Title>
Saat saya menyegarkan halaman, saya berharap Judulnya berwarna pink
Saat pertama kali halaman dibuat, judulnya tampak berwarna merah muda. Saat saya me-refresh halaman, warna pink tidak lagi dihormati.
Jika saya mengubah warna dalam kode menjadi yang lain, dan menyimpan file, maka halaman akan diperbarui. Tetapi sekali lagi, setelah menyegarkan, perubahan itu hilang lagi. Saya tidak tahu apa yang mungkin menyebabkan ini. Bantuan apa pun dihargai.
| Teknologi | Versi |
|---------|---------|
| selanjutnya | terbaru |
| simpul | |
| OS | lengkungan |
| peramban | vivaldi |
Saya memiliki bug yang sama, dengan pengaturan yang berbeda. Saya memiliki monorepo dengan dua folder:
app
, dengan aplikasi next.js sayaui
, dengan 'perpustakaan ui' saya menggunakan komponen gayaSaya memilikinya dalam contoh repo: https://github.com/lucleray/ssr-ui-library
Ketika saya memperbarui warna latar belakang misalnya, di folder ui, dan menyimpan file, halaman diperbarui.
Tapi kemudian, jika saya me-refresh halaman, pembaruannya hilang.
Apakah ini ada hubungannya dengan urutan injeksi style sheet di <head>
?
@ianregister Tidak, urutan injeksi di <head>
tidak terkait
Masalahnya adalah server dan klien tidak merender kode yang sama untuk stylesheet
Saya memiliki bug yang sama dan tidak hanya pada gaya. Muat ulang panas akan mengambil perubahan, tetapi peramban yang menyegarkan tidak. Saya harus menjalankan server lagi (node server.js) untuk mengambil pembaruan terbaru. Saya menggunakan [email protected] , bereaksi 16.3 dan mengekspresikan untuk server.
@lucleray , coba ini:
Pastikan Anda memiliki babel-plugin-styled-components
sebagai dependensi dan di package.json Anda, beri tahu babel bahwa Anda sedang melakukan rendering sisi server.
Pikirkan bahwa ini hanya masalah konfigurasi yang Anda hadapi.
package.json
```json
"sayang": {
"env": {
"perkembangan": {
"preset": ["berikutnya/babel"],
"plugin": [
[
"komponen gaya",
{
"ssr": benar,
"displayName": benar
}
]
]
},
"produksi": {
"preset": ["berikutnya/babel"],
"plugin": [
[
"komponen gaya",
{
"ssr": benar,
"displayName": false
}
]
]
}
}
}
@tvthatsme Saya menambahkan babel-plugin-styled-components
di perpustakaan ui dan aplikasi itu sendiri, tetapi saya masih memiliki masalah yang sama.
Anda dapat memeriksa di sini:
https://github.com/lucleray/ssr-ui-library/blob/master/app/.babelrc
https://github.com/lucleray/ssr-ui-library/blob/master/ui/.babelrc
Saya tidak yakin itu konfigurasi (konfigurasi webpack), atau bug di suatu tempat.
memiliki masalah serupa di mana setiap pengeditan pada komponen (tidak terkait gaya) akan menyebabkan kesalahan "Peringatan: Prop className
tidak cocok. Server:" pada halaman keras berikutnya segar. Perlu me-restart server agar bisa hilang.
@sea129 apakah Anda dapat memperbaikinya?
Lol, memiliki masalah yang sama di sini. @valeeum apakah Anda bisa menyelesaikannya?
Saya melakukan sedikit riset tentang masalah ini, dan saya pikir itu mungkin semacam tautan "caching webpack".
Saya menggunakan kode di sini sebagai contoh masalah: https://github.com/lucleray/ssr-ui-library
app
menggunakan Next.js dan memiliki ketergantungan pada ui
. Saya menggunakan ruang kerja benang untuk menautkannya tetapi bisa lebih sederhana yarn link
.
Di sisi server, bundel tidak menyertakan modul ui
dan memperlakukannya sebagai external
(karena ada di node_modules).
Di sisi klien, bundel menyertakan modul ui
.
Tampaknya seperti ini di bundel .next/static
(sisi klien) :
/***/ "../ui/bundle.js":
/*!***********************!*\
!*** ../ui/bundle.js ***!
\***********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var styled = _interopDefault(__webpack_require__(/*! styled-components */ "../node_modules/styled-components/dist/styled-components.browser.esm.js"));
const UiButton = styled.button`
background: black;
`;
exports.UiButton = UiButton;
/***/ }),
Di sisi lain, dalam bundel .next/server
(sisi server), tampak seperti ini:
/***/ "@monorepo/ui":
/*!*******************************!*\
!*** external "@monorepo/ui" ***!
\*******************************/
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = require("@monorepo/ui");
/***/ }),
Yang aneh adalah module.exports = require("@monorepo/ui")
harus diselesaikan ke paket ui
dan berfungsi dengan baik. Tapi sepertinya itu di-cache dan tidak menyelesaikan paket ui
yang sebenarnya.
Jika saya mengubah warna latar belakang tombol di ui
menjadi biru misalnya. Pemuat ulang panas memperbarui halaman dengan benar. Tetapi jika saya menyegarkan, maka halaman tersebut dirender di sisi server dengan warna lama (hijau dalam contoh saya). Sepertinya bundel sisi server tidak menyelesaikan ketergantungan @monorepo/ui
untuk menggunakan paket yang sebenarnya, tetapi menggunakan versi yang di-cache.
Ini menyelesaikannya dengan mengonfigurasi webpack untuk memperlakukan @monorepo/ui
bukan sebagai ketergantungan eksternal dan menggabungkannya dalam bundel sisi server, seperti ini: https://github.com/lucleray/ssr-ui-library/blob/ webpack-config/app/next.config.js
Saya masih ingin memahami apa yang terjadi
require
memiliki cache bawaan ( require.cache
) ini adalah perilaku yang diharapkan untuk dependensi dalam node_modules, karena kami tidak akan menggabungkan apa pun di dalam node_modules di server (untuk kecepatan kompilasi).
Oke, itu masuk akal.
Jadi masalahnya adalah hot-reloader tidak memuat ulang perubahan kode dalam dependensi eksternal, di sisi server, bukan?
Dalam contoh yang saya bagikan, saya berharap perubahan kode saya dimuat baik di sisi klien (yang merupakan kasus) dan server (yang tidak demikian) dalam mode pengembangan.
Jadi masalahnya adalah hot-reloader tidak memuat ulang perubahan kode dalam dependensi eksternal, di sisi server, bukan?
Tepatnya, kami hanya menghapus path lengkap dari require.cache.
Menurut Anda bagaimana saya bisa menyelesaikan @timneutkens ini?
Haruskah saya menghapus @monorepo/ui
dari dependensi eksternal sehingga dibundel dalam bundel sisi server? Itu berhasil tetapi karena saya sudah menerjemahkannya, bukankah lebih baik hanya memintanya?
Mungkin semudah menggunakan https://github.com/martpie/next-plugin-transpile-modules untuk mengaktifkan kompilasi modul.
@timneutkens Mengapa ini ditutup? masalah ini masih ada di versi terbaru
Masih mengalami masalah ini juga
Saya masih memiliki masalah ini juga
Ditto juga di sini
Juga mengalami masalah ini
Sunting (solusi):
Masalah ini terkait dengan pengaturan konfigurasi babel yang tidak benar. Jika Anda melihat contoh resmi NextJS dengan komponen gaya, Anda akan melihat mereka memiliki file .babelrc
dengan:
{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true }]]
}
Maka Anda harus menambahkan plugin ini ke devDependencies di file package.json
"devDependencies": {
"babel-plugin-styled-components": "^1.8.0"
},
Kemudian jalankan perintah instal Anda, yarn install
atau npm install
dan Anda siap melakukannya!
PS: Pastikan hanya satu tab yang terbuka untuk pekerjaan pengembang localhost Anda!
baiklah orang. di sini adalah solusi. buat _document.js di root direktori dan tambahkan ini.
import Document, { Head, Main, NextScript } from 'next/document'
import { ServerStyleSheet } from 'styled-components'
class MyDocument extends Document {
static getInitialProps ({ renderPage }) {
const sheet = new ServerStyleSheet()
const page = renderPage(App => props => sheet.collectStyles(<App {...props} />))
const styleTags = sheet.getStyleElement()
return { ...page, styleTags }
}
render () {
return (
<html>
<Head>
<title>Your site title</title>
{this.props.styleTags}
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}
export default MyDocument
lalu npm install --save -D babel-plugin-styled-components
juga buat aplikasi khusus di direktori halaman, _App.js dan tambahkan:
import React from "react";
import App from "next/app";
class MyApp extends App {
render() {
const { Component, pageProps } = this.props;
return <Component {...pageProps} />;
}
}
export default MyApp;
Anda sudah siap
Juga mengalami masalah ini
Sunting (solusi):
Masalah ini terkait dengan pengaturan konfigurasi babel yang tidak benar. Jika Anda melihat contoh resmi NextJS dengan komponen gaya, Anda akan melihat mereka memiliki file
.babelrc
dengan:{ "presets": ["next/babel"], "plugins": [["styled-components", { "ssr": true }]] }
Maka Anda harus menambahkan plugin ini ke devDependencies di file
package.json
"devDependencies": { "babel-plugin-styled-components": "^1.8.0" },
Kemudian jalankan perintah instal Anda,
yarn install
ataunpm install
dan Anda siap melakukannya!PS: Pastikan hanya satu tab yang terbuka untuk pekerjaan pengembang localhost Anda!
Ini berfungsi, Terima kasih
Sayangnya, itu masih menjadi masalah.
Saya menyaksikan sesuatu yang aneh:
Jika Anda memiliki
styled.h1`
color: red;
`
pada beban awal berwarna merah, ketika Anda mengubahnya menjadi
styled.h1`
color: purple;
`
itu diabaikan, teks menjadi hitam, tidak ada gaya.
Saat Anda memuat ulang halaman itu menjadi ungu seperti yang diharapkan.
Tetapi ketika Anda kemudian mengubah warna menjadi red
, HMR berfungsi dengan baik dan teks menjadi merah.
Anda dapat melakukannya dengan banyak warna jika Anda mau, seperti jika ada semacam caching yang sedang berlangsung.
Jadi ketika Anda menambahkan gaya baru melalui HMR, itu akan diabaikan, tetapi pada render awal itu ditempatkan di cache, dan jika Anda menggunakan gaya ini nanti melalui HMR, itu akan berhasil. Jadi itu tidak terkirim ke browser dengan benar di HMR?
Saya tidak memiliki pengetahuan tentang internal SC dan Next.js, jadi itu hanya tebakan saya.
EDIT:
itu bekerja dengan baik pada komponen-gaya 5.0.0-rc.2
tidak yakin seberapa relevan info ini, tetapi bagaimana saya memperbaikinya sendiri adalah saya mengikuti contoh dari repo berikutnya dan mengintegrasikan potongan-potongan yang hilang
https://github.com/zeit/next.js/tree/canary/examples/with-typescript-styled-components
Saya menggunakan solusi next.js dan .babelrc
dengan benar karena ini adalah format atau larik dan objek yang cukup membingungkan untuk diikuti.
Ini adalah file .babelrc
misalnya:
{
"presets": [
[
"next/babel",
{
"styled-jsx": {
"plugins": [
"styled-jsx-plugin-postcss"
]
}
}
]
],
"plugins": [
[
"styled-components",
{
"ssr": true
}
]
]
}
Masalah ini akan terjadi jika Anda sedang kloning dan membangun salah satu contoh Next.js yang tidak memiliki sama package.json
dependensi dan .babelrc
pengaturan. Selain solusi MaxMckinney, pastikan Anda memiliki ketergantungan yang benar pada package.json
. Saya benar-benar kehilangan "styled-components": "^5.0.0"
Dalam kasus saya, cukup tambahkan file _app.js dan _document.js di bawah halaman floder, itu berfungsi dengan baik.
// _app.js
import App from 'next/app'
import { ThemeProvider } from 'styled-components'
const theme = {}
export default class MyApp extends App {
render() {
const { Component, pageProps } = this.props
return (
<ThemeProvider theme={theme}>
<Component {...pageProps} />
</ThemeProvider>
)
}
}
// _document.js
import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet()
const originalRenderPage = ctx.renderPage
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
})
const initialProps = await Document.getInitialProps(ctx)
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
}
} finally {
sheet.seal()
}
}
}
Dalam kasus saya, cukup tambahkan file _app.js dan _document.js di bawah halaman floder, itu berfungsi dengan baik.
// _app.js import App from 'next/app' import { ThemeProvider } from 'styled-components' const theme = {} export default class MyApp extends App { render() { const { Component, pageProps } = this.props return ( <ThemeProvider theme={theme}> <Component {...pageProps} /> </ThemeProvider> ) } }
// _document.js import Document from 'next/document' import { ServerStyleSheet } from 'styled-components' export default class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new ServerStyleSheet() const originalRenderPage = ctx.renderPage try { ctx.renderPage = () => originalRenderPage({ enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />), }) const initialProps = await Document.getInitialProps(ctx) return { ...initialProps, styles: ( <> {initialProps.styles} {sheet.getStyleElement()} </> ), } } finally { sheet.seal() } } }
Bagaimana saya harus menggunakannya di Material-UI?
Komentar yang paling membantu
Juga mengalami masalah ini
Sunting (solusi):
Masalah ini terkait dengan pengaturan konfigurasi babel yang tidak benar. Jika Anda melihat contoh resmi NextJS dengan komponen gaya, Anda akan melihat mereka memiliki file
.babelrc
dengan:Maka Anda harus menambahkan plugin ini ke devDependencies di file
package.json
Kemudian jalankan perintah instal Anda,
yarn install
ataunpm install
dan Anda siap melakukannya!PS: Pastikan hanya satu tab yang terbuka untuk pekerjaan pengembang localhost Anda!