Блог

Я искал переполнение стека для подобных вопросов, но ответы либо относятся к старым версиям, либо не имеют отношения к моей ситуации.

Я получаю вышеуказанную ошибку для первого компонента на странице, который использует стилизованные компоненты. Если я удалю этот компонент, я получу ошибку для следующего и так далее, поэтому я предполагаю, что есть проблема с процессом увлажнения, и это происходит для каждого имени класса.

У меня есть файл _document.tsx, который расширяет класс документа и имеет следующую функцию getInitialProps

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

Я подозреваю, что это как-то связано с этим кодом, потому что до того, как я обновился до Typescript (и мне пришлось изменить свой файл _app.tsx), Я не получил эту ошибку, но я понятия не имею, как ее исправить.

Любая помощь была бы действительно признательна.

Попробуйте установить babel-plugin-styled-components , затем добавьте .babelrc файл в корневой каталог проекта со следующей конфигурацией. Это гарантирует, что во время регидратации не произойдет несоответствий в генерации классов.

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

Из babel-plugin-styled-components документации:

Добавляя уникальный идентификатор к каждому стилизованному компоненту, этот плагин позволяет избежать несоответствий контрольной суммы из-за создания разных классов на клиенте и на сервере. Если вы не используете этот плагин и попытаетесь выполнить рендеринг в стиле на стороне сервера, компоненты React будут жаловаться с предупреждением о несоответствии атрибутов HTML во время регидратации.