Next.js: komponen gaya diganti saat memuat ulang panas

Dibuat pada 28 Mar 2018  ·  27Komentar  ·  Sumber: vercel/next.js

  • [x ] Saya telah mencari masalah repositori ini dan percaya bahwa ini bukan duplikat.

Perilaku yang Diharapkan


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

Perilaku Saat Ini


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.

Lingkungan Anda


| Teknologi | Versi |
|---------|---------|
| selanjutnya | terbaru |
| simpul | |
| OS | lengkungan |
| peramban | vivaldi |

good first issue

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:

{
    "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!

Semua 27 komentar

Saya memiliki bug yang sama, dengan pengaturan yang berbeda. Saya memiliki monorepo dengan dua folder:

  • app , dengan aplikasi next.js saya
  • ui , dengan 'perpustakaan ui' saya menggunakan komponen gaya

Saya 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 atau npm 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?

Apakah halaman ini membantu?
0 / 5 - 0 peringkat