style disappearing on hard refresh / new load with nextJS

Bug report

Describe the bug

Really weird, as I can’t reproduce this on any other component or in any other project, I’m just hoping someone has seen something like this before and can point me in the right direction.

To reproduce

I have:

<Box height='250px' width='320px'>
    <Image
          src={post.fields.heroImage?.fields?.file?.url}
          objectFit='cover'
          borderRadius='15px'
          width='100%'
          height='100%'
          alt={post.fields?.heroImage?.fields?.title}
          // TODO: Fallback SRC fallbackSrc='TODO'
    />
</Box>

When I make any changes to either the parent Box or the Image, and nextJS fast reloads, it works perfectly. As soon as I hard refresh the page, the “height” and “width” attributes on the <Box> have completely disappeared, and thus the Box ends up taking the original dimensions of the Image.

Inspecting dev tools shows after making any change: BOX:

IMAGE:

As soon as I reload the page, the class name of the BOX goes to css-0 instead of the random css class it generated on the fast reload.

Minimal reproduction

I can’t really replicate this anywhere else, or even in isolation 😦

Expected behavior

the css class should remain!

Screenshots

System information

• OS: [e.g. macOS, Windows] All
• Browser (if applies): [e.g. Chrome, Safari] All
• Version of @chakra-ui/core: [e.g. 1.0.0-rc.3] 0.8.0
• Version of Node.js: [e.g. 12.11.1] 12.18.3

Additional context

My entire component looks like this - assuming it might have some weird bug in my parent(s)? Also I tried removing chakra and canning node_modules and re installing but no luck

import { Box, Heading, Image, PseudoBox, Tag, Text } from '@chakra-ui/core'
import { PostDisplayTypes } from '../types/postTypes'
import makeDate from '../utils/makeDate'
import shorten from '../utils/shortenSentence'
import { Link } from './Link'

const Card = ({ post }) => {
  return (
    <PseudoBox
      as='article'
      position='relative'
      height={['594px', '575px']}
      width={['321px', '350px']}
      borderRadius='15px'
      px='15px'
      pt='15px'
      m='20px'
      boxShadow='0px 5px 10px rgba(0, 0, 0, 0.16)'
      _hover={{
        boxShadow: '2px 10px 20px rgba(0, 0, 0, 0.32)',
      }}
      transition='all 0.2s ease'
    >
      <Link
        href={`/blog/${post.fields.slug}`}
        _hover={{ textDecoration: 'none' }}
        passHref
      >
        <Box>
          <Text
            fontSize='sm'
            color='cyan.700'
            pb='15px'
            fontWeight='bold'
            display='flex'
            justifyContent='space-between'
          >
            <Box>{makeDate(post.sys.createdAt)} </Box>
            <Box color='purple.700'>
              {PostDisplayTypes[post.sys.contentType.sys.id]}
            </Box>
          </Text>
          <Heading
            as='h3'
            fontSize='2xl'
            textAlign='left'
            minHeight='4em'
            maxHeight='4em'
          >
            {shorten(post.fields?.title, 75)}
          </Heading>
          <Text pb='15px' minHeight='9em' maxHeight='9em'>
            {shorten(post.fields.synopsis, 195)}
          </Text>
          <Box height='250px' width='320px'>
            <Image
              src={post.fields.heroImage?.fields?.file?.url}
              objectFit='cover'
              borderRadius='15px'
              width='100%'
              height='100%'
              alt={post.fields?.heroImage?.fields?.title}
              // TODO: Fallback SRC fallbackSrc='TODO'
            />
          </Box>
        </Box>
      </Link>

      <Box bottom='15px' m='15px 15px' position='absolute'>
        {post.fields?.tags?.slice(0, 2).map((tag) => (
          <Link
            href={`/tags/${tag.fields?.slug}`}
            _hover={{ textDecoration: 'none' }}
            passHref
          >
            <Tag
              variantColor='purple'
              rounded='full'
              variant='solid'
              mr='15px'
              boxShadow='2px 4px 10px rgba(0, 0, 0, 0.5)'
              _hover={{
                boxShadow: '4px 8px 20px rgba(0, 0, 0, 0.5)',
                bottom: '18px',
              }}
              transition='all 0.2s ease'
            >
              {tag.fields.name}
            </Tag>
          </Link>
        ))}
      </Box>
    </PseudoBox>
  )
}

export default Card

[NitinSirsath]

if you are using styled-components then do the following and you are good to go Step 1: npm install --save-dev babel-plugin-styled-components Step 2: Create a file [.babelrc] in the root directory of next project Step 3: Paste Following Code to .babelrc File:-

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

Step 4: Restart the next server

[MalikBagwala]

In my case this happened becuase @emotion/react was being loaded twice hence messing with the emotion cache. This happened due to another library which I was using react-select (which itself is based emotion)

My solution was to remove the direct dependency of @emotion/react

yarn remove @emotion/react

Everything worked like a charm after this.

PS I am aware that this is not an ideal solution, if someone has a better solution please let me know.