Next.js: hot reload 시 styled-component 재정의

에 만든 2018년 03월 28일 · 27코멘트 · 출처: vercel/next.js

[x ] 이 저장소의 문제 를 검색했으며 이것이 중복되지 않는다고 생각합니다.

예상되는 동작

내 페이지에는 다음과 같은 매우 기본적인 코드가 포함되어 있습니다.

import React from 'react'
import styled from 'styled-components'

const Title = styled.h1`
  color: pink;
  font-size: 50px;
`

export default () => <Title>My page</Title>

페이지를 새로 고칠 때 제목이 분홍색일 것으로 예상합니다.

현재 행동

페이지가 처음 만들어지면 제목이 분홍색으로 표시됩니다. 페이지를 새로 고침하면 분홍색이 더 이상 존중되지 않습니다.
코드의 색상을 다른 것으로 변경하고 파일을 저장하면 페이지가 업데이트됩니다. 그러나 다시 새로 고치면 변경 사항이 다시 손실됩니다. 이 문제의 원인이 무엇인지 전혀 모릅니다. 도움을 주시면 감사하겠습니다.

당신의 환경

| 기술 | 버전 |
|---------|---------|
| 다음 | 최신 |
| 노드 | |
| OS | 아치 |
| 브라우저 | 비발디 |

good first issue

출처

ghost

👍7

가장 유용한 댓글

또한이 문제가

편집(솔루션):

이 문제는 babel 구성이 올바르게 설정되지 않은 것과 관련이 있습니다. 스타일이 지정된 구성 요소가 있는 NextJS의 공식 예제를 보면 다음과 같은 .babelrc 파일이 있음을 알 수 있습니다.

{
    "presets": ["next/babel"],
    "plugins": [["styled-components", { "ssr": true }]]
}

그런 다음 이 플러그인을 package.json 파일의 devDependencies에 추가해야 합니다.

"devDependencies": {
    "babel-plugin-styled-components": "^1.8.0"
},

그런 다음 설치 명령, yarn install 또는 npm install 를 실행하면 바로 사용할 수 있습니다!

추신: 로컬 호스트 개발 작업을 위해 하나의 탭만 열어야 합니다!

MaxMcKinney 에 2019년 04월 19일

👍37 🎉20 ❤17 🚀10

모든 27 댓글

다른 설정으로 동일한 버그가 있습니다. 두 개의 폴더가 있는 monorepo가 있습니다.

app , 내 next.js 앱 사용
ui , 스타일 구성 요소를 사용하는 'ui 라이브러리' 사용

예제 저장소에 있습니다 : https://github.com/lucleray/ssr-ui-library

예를 들어 ui 폴더에서 배경색을 업데이트하고 파일을 저장하면 페이지가 업데이트됩니다.
그러나 페이지를 새로 고치면 업데이트가 손실됩니다.

lucleray 에 2018년 04월 03일

이것은 <head> 에 있는 스타일 시트의 주입 순서와 관련이 있습니까?

ianregister 에 2018년 04월 08일

@ianregister 아니요, <head> 의 주입 순서는 관련이 없습니다.

문제는 서버와 클라이언트가 스타일시트에 대해 동일한 코드를 렌더링하지 않는다는 것입니다.

lucleray 에 2018년 04월 08일

나는 같은 버그가 있으며 스타일에만 국한되지 않습니다. 핫 리로드는 변경 사항을 선택하지만 브라우저 새로 고침은 그렇지 않습니다. 최신 업데이트를 받으려면 서버(노드 server.js)를 다시 실행해야 합니다. 나는 [email protected] 을 사용하고 16.3에 반응하고 서버에 대해 표현합니다.

sea129 에 2018년 04월 17일

👍1

@lucleray , 이것을 시도하십시오:

babel-plugin-styled-components 가 종속성인지 확인하고 package.json에서 babel에게 서버 측 렌더링을 수행하고 있음을 알립니다.

이것이 직면하고 있는 구성 문제일 뿐이라고 생각하십시오.

패키지.json
```json
"바벨": {
"환경": {
"개발": {
"사전 설정": ["다음/바벨"],
"플러그인": [
[
"스타일 구성 요소",
{
"ssr": 사실,
"디스플레이 이름": 참
}
]
]
},
"생산": {
"사전 설정": ["다음/바벨"],
"플러그인": [
[
"스타일 구성 요소",
{
"ssr": 사실,
"디스플레이 이름": 거짓
}
]
]
}
}
}

tvthatsme 에 2018년 04월 18일

👍29 🎉16 🚀6 ❤3

@tvthatsme UI 라이브러리와 앱 자체에 babel-plugin-styled-components 를 추가했지만 여전히 동일한 문제가 있습니다.

여기에서 확인할 수 있습니다.
https://github.com/lucleray/ssr-ui-library/blob/master/app/.babelrc
https://github.com/lucleray/ssr-ui-library/blob/master/ui/.babelrc

구성(webpack 구성)인지, 어딘가에 버그가 있는지 잘 모르겠습니다.

lucleray 에 2018년 04월 18일

구성 요소(스타일과 관련되지 않음)를 편집하면 후속 하드 페이지 새로 고침에서 "경고: Prop className 이 일치하지 않았습니다. 서버:" 오류가 발생하는 유사한 문제가 있습니다. 사라지려면 서버를 다시 시작해야 합니다.

@sea129 고칠 수 있었나요?

valeeum 에 2018년 07월 25일

Lol, 여기에 같은 문제가 있습니다. @valeeum 해결하셨나요?

chenshuiluke 에 2018년 08월 11일

이 문제에 대해 약간의 연구를 수행했으며 일종의 "웹팩 캐싱"과 연결될 수 있다고 생각합니다.

문제의 예로 여기에 코드를 사용합니다. https://github.com/lucleray/ssr-ui-library

app 는 Next.js를 사용하고 있으며 ui 에 종속됩니다. 연결하기 위해 원사의 작업 공간을 사용하고 있지만 더 간단한 yarn link 있습니다.

서버 측에서 번들은 ui 모듈을 포함하지 않고 external 로 취급합니다(node_modules에 있기 때문에).
클라이언트 측에서 번들은 ui 모듈을 포함합니다.

.next/static (클라이언트 측) 번들에서 다음과 같이 나타납니다.

/***/ "../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;


/***/ }),

반면 .next/server (서버 측) 번들에서는 다음과 같이 나타납니다.

/***/ "@monorepo/ui":
/*!*******************************!*\
  !*** external "@monorepo/ui" ***!
  \*******************************/
/*! no static exports found */
/***/ (function(module, exports) {

module.exports = require("@monorepo/ui");

/***/ }),

이상한 점은 module.exports = require("@monorepo/ui") 가 ui 패키지로 확인되고 제대로 작동해야 한다는 것입니다. 하지만 캐시된 것처럼 보이며 실제 ui 패키지로 확인되지 않습니다.

예를 들어 ui 에 있는 버튼의 배경색을 파란색으로 변경하면. 핫 리로더는 페이지를 올바르게 업데이트합니다. 그러나 새로 고침하면 페이지가 이전 색상(내 예에서는 녹색)으로 서버 측으로 렌더링됩니다. 서버 측 번들이 실제 패키지로 이동하기 위해 @monorepo/ui 종속성을 해결하지 않고 캐시된 버전을 사용하는 것과 같습니다.

@monorepo/ui 외부 종속성이 아니라 다음과 같이 서버 측 번들로 묶도록 webpack을 구성하여 해결했습니다. https://github.com/lucleray/ssr-ui-library/blob/ webpack-config/app/next.config.js

나는 여전히 무슨 일이 일어나고 있는지 이해하고 싶습니다 🤔

lucleray 에 2018년 08월 19일

require 에는 캐시( require.cache )가 내장되어 있습니다. 이는 (컴파일 속도를 위해) 서버의 node_modules 내부에 아무 것도 번들로 묶지 않기 때문에 node_modules의 종속성에 대해 예상되는 동작입니다.

timneutkens 에 2018년 08월 19일

알겠습니다.

따라서 문제는 핫 리로더가 서버 측에서 외부 종속성의 코드 변경 사항을 다시 로드하지 않는다는 것입니다. 맞습니까?

내가 공유한 예제에서 내 코드 변경 사항이 개발 모드에서 클라이언트(이 경우)와 서버(경우가 아님) 모두에 로드될 것으로 예상합니다.

lucleray 에 2018년 08월 20일

따라서 문제는 핫 리로더가 서버 측에서 외부 종속성의 코드 변경 사항을 다시 로드하지 않는다는 것입니다.

정확히는 require.cache에서 전체 경로만 삭제합니다.

timneutkens 에 2018년 08월 20일

이 @timneutkens를 어떻게 해결할 수 있다고 생각

서버 측 번들에 번들로 포함되도록 외부 종속성에서 @monorepo/ui 를 제거해야 합니까? 그것은 작동하지만 이미 그것을 변환하고 있기 때문에 그것을 요구하는 것이 더 낫지 않을까요?

lucleray 에 2018년 08월 21일

https://github.com/martpie/next-plugin-transpile-modules 를 사용하여 모듈 컴파일을 활성화하는 것만큼 쉬울 수 있습니다.

timneutkens 에 2018년 11월 08일

👎3

@timneutkens 왜 폐쇄되었나요? 이 문제는 최신 버전에 여전히 존재합니다

jeankvd 에 2019년 03월 15일

👍35

여전히이 문제가 있습니다.

oscargws 에 2019년 04월 06일

👍16

나는 아직도이 문제가있다

asotoglez 에 2019년 04월 08일

여기도 마찬가지

Ruegen 에 2019년 04월 14일

또한이 문제가

편집(솔루션):

{
    "presets": ["next/babel"],
    "plugins": [["styled-components", { "ssr": true }]]
}

그런 다음 이 플러그인을 package.json 파일의 devDependencies에 추가해야 합니다.

"devDependencies": {
    "babel-plugin-styled-components": "^1.8.0"
},

그런 다음 설치 명령, yarn install 또는 npm install 를 실행하면 바로 사용할 수 있습니다!

추신: 로컬 호스트 개발 작업을 위해 하나의 탭만 열어야 합니다!

MaxMcKinney 에 2019년 04월 19일

👍37 🎉20 ❤17 🚀10

좋아 사람들. 여기에 해결책이 있습니다. 디렉토리의 루트에 _document.js를 만들고 이것을 추가하십시오.

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

그럼 npm install --save -D babel-plugin-styled-components

또한 페이지 디렉토리 _App.js에 사용자 지정 앱을 만들고 다음을 추가합니다.

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;

당신은 모든 설정

ghost 에 2019년 09월 04일

👍2

또한이 문제가
편집(솔루션):
이 문제는 babel 구성이 올바르게 설정되지 않은 것과 관련이 있습니다. 스타일이 지정된 구성 요소가 있는 NextJS의 공식 예제를 보면 다음과 같은 .babelrc 파일이 있음을 알 수 있습니다.
{
    "presets": ["next/babel"],
    "plugins": [["styled-components", { "ssr": true }]]
}
그런 다음 이 플러그인을 package.json 파일의 devDependencies에 추가해야 합니다.
"devDependencies": {
    "babel-plugin-styled-components": "^1.8.0"
},
그런 다음 설치 명령, yarn install 또는 npm install 를 실행하면 바로 사용할 수 있습니다!
추신: 로컬 호스트 개발 작업을 위해 하나의 탭만 열어야 합니다!

이것은 작동합니다, 감사합니다

omendez85 에 2019년 09월 05일

👍2

불행히도 여전히 문제입니다.

나는 이상한 것을 목격하고 있습니다.

당신이 가지고 있다면

styled.h1`
color: red;
`

초기 로드 시 빨간색, 다음으로 변경하면

styled.h1`
color: purple;
`

무시되고 텍스트가 검은색이 되고 스타일이 없습니다.
페이지를 새로고침하면 예상대로 보라색이 됩니다.
그러나 색상을 red 하면 HMR이 제대로 작동하고 텍스트가 빨간색이 됩니다.
어떤 종류의 캐싱이 진행 중인 경우와 같이 원하는 경우 많은 색상으로 이를 수행할 수 있습니다.

따라서 HMR을 통해 새 스타일을 추가하면 무시되지만 초기 렌더링에서는 캐시에 배치되고 나중에 HMR을 통해 이 스타일을 사용하면 작동합니다. 그래서 HMR에서 브라우저에 제대로 전달되지 않습니까?

저는 SC 및 Next.js 내부에 대한 지식이 없으므로 추측일 뿐입니다.

편집하다:
스타일이 지정된 구성 요소 5.0.0-rc.2 에서 제대로 작동했습니다.

TheRusskiy 에 2019년 11월 21일

이 정보가 얼마나 관련이 있을지는 확실하지 않지만 내가 직접 수정한 방법은 다음 리포지토리의 예제를 따라 누락된 비트 조각을 통합한 것입니다.
https://github.com/zeit/next.js/tree/canary/examples/with-typescript-styled-components

Igor2122 에 2019년 11월 30일

나는 next.js를 사용하고 있었고 @MaxMcKinney 솔루션이 저에게 .babelrc 기본 설정을 올바르게 구성했는지 확인하십시오. 따라야 할 배열 및 개체가 매우 혼란스러운 형식이기 때문입니다.

이것은 예를 들어 내 .babelrc 파일이었습니다.

{
    "presets": [
        [
            "next/babel",
            {
                "styled-jsx": {
                    "plugins": [
                        "styled-jsx-plugin-postcss"
                    ]
                }
            }
        ]
    ],
    "plugins": [
        [
            "styled-components",
            {
                "ssr": true
            }
        ]
    ]
}

limitlessloop 에 2020년 03월 30일

👍1

이 문제는 동일한 package.json 종속성과 .babelrc 설정이 없는 Next.js 예제 중 하나를 복제하고 빌드하는 경우에 발생합니다. MaxMckinney 솔루션 외에도 package.json 올바른 종속성이 있는지 확인하십시오. "styled-components": "^5.0.0" 완전히 놓쳤습니다.

CalvinKorver 에 2020년 05월 08일

제 경우에는 페이지 floder 아래에 _app.js 및 _document.js 파일을 추가하기만 하면 잘 작동합니다.

// _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()
    }
  }
}

taiwanhua 에 2020년 07월 23일

👍1

제 경우에는 페이지 floder 아래에 _app.js 및 _document.js 파일을 추가하기만 하면 잘 작동합니다.

// _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()
    }
  }
}

Material-UI에서 어떻게 사용해야 하나요?

521707 에 2020년 08월 24일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급