僅在本地開發中的“類名不匹配”

Question

我正在使用 NextJS、React 和 Styled Components 開發應用程序。 我的應用程序在生產中看起來/工作正常，但是當我在本地運行它進行開發時， _app.tsx中使用的組件沒有樣式，我在瀏覽器控制台中看到className did not match錯誤。

• NextJS 12.0.7
• 反應 17.0.2
• 樣式化組件 5.3.3
• babel-plugin-styled-components 2.0.2

這是我的.babelrc文件：

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

為什么只有當我在本地運行應用程序時才會發生這種情況以及如何修復它？

_app.tsx

生產：

當地發展：

這是出現渲染問題的NavBar.tsx組件的代碼：

import { CreateDeckButton } from 'components/CreateDeckButton'
import { Button, colors } from 'components/ui'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { FC } from 'react'
import styled from 'styled-components'
import { useMe } from 'utils'

export const NavBar: FC = () => {
  const { me, isLoading, isError } = useMe()
  const { asPath } = useRouter()

  function getUrl(url: string) {
    return asPath === '/' ? url : `${url}?returnTo=${asPath}`
  }

  let actions = (
    <Button href={getUrl('/api/auth/login')} as="a" variant="neutral">
      Login
    </Button>
  )

  if (isLoading) {
    actions = <span>Loading...</span>
  }

  if (isError) {
    actions = (
      <Button href={getUrl('/api/auth/login')} as="a" variant="neutral">
        Login
      </Button>
    )
  }

  if (me) {
    actions = (
      <>
        <p>
          Logged in as <strong>{`@${me.handle}`}</strong>
        </p>
        <Button href={getUrl('/api/auth/logout')} as="a" variant="primary">
          Logout
        </Button>
      </>
    )
  }

  return (
    <Header>
      <Left>
        <Link href="/">
          <Logo>Sol Ring</Logo>
        </Link>
        <Link href="/decks">
          <Button as="a" variant="neutral">
            Decks
          </Button>
        </Link>
        <Link href="/gatherer">
          <Button as="a" variant="neutral">
            Gatherer
          </Button>
        </Link>
        <CreateDeckButton />
      </Left>
      <Actions>{actions}</Actions>
    </Header>
  )
}

const Header = styled.header`
  flex: 0 0 80px;
  display: flex;
  align-items: center;
  background-color: ${colors.n1};
  color: ${colors.n7};
  padding: 0 30px;
  justify-content: space-between;
`

const Left = styled.div`
  display: flex;
  align-items: center;

  & > button,
  & > a {
    margin-left: 16px;
  }
`

const Logo = styled.h1`
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  line-height: 1em;
  text-transform: uppercase;
  margin-right: 16px;
`

const Actions = styled.div`
  display: flex;
  align-items: center;

  & > button,
  & > a {
    margin-left: 16px;
  }
`

Answer 1

您可以使用 Next 12 完全放棄 babelrc，然后您將能夠使用 SWC 編譯器的全部功能。 在你的next.config.js文件中嘗試這個配置並刪除你的 .babelrc 文件

const { withSuperjson } = require("next-superjson");

require("eslint-config-next/parser");

const {
  env: { ANALYZE }
} = process;

// @ts-check
/**
 * @type {import('next').NextConfig}
 **/

module.exports = withSuperjson()({
  webpack(config, options) {
    config.experiments = config.experiments || {};
    // allows for async imports within fuctions
    config.experiments.topLevelAwait = true;
    return config;
  },
  swcMinify: true,
  webpack5: true,
  sourceMaps: {
    productionBrowserSourceMaps: true
  },
  experimental: {
    // ssr and displayName are configured by default
    styledComponents: true,
  },
  images: {
    formats: ["image/avif", "image/webp"],
    domains: [
      "avatars.githubusercontent.com",
      "secure.gravatar.com",
      "en.gravatar.com",
      "unsplash.com",
      "images.unsplash.com",
      "tailwindui.com",
      "gravatar.com",
      "images.unsplash.com",
      "lh3.googleusercontent.com"
    ]
  },
  reactStrictMode: true
});

console.log("[next.config.js]: ", JSON.stringify(module.exports, null, 2));

Answer 2

我可以通過將.babelrc文件更改為以下內容來解決我的問題：

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