search

jeanverster / chakra-ui-steps

Steps component designed to work seamlessly with Chakra UI
https://chakra-ui-steps.vercel.app
390 stars 44 forks source link

Uncaught TypeError: Cannot read properties of undefined (reading 'width') #80

Closed ablaszkiewicz closed 2 years ago

ablaszkiewicz commented 2 years ago

Hi.

These are my dependencies:

"@chakra-ui/icons": "^2.0.6",
"@chakra-ui/react": "^2.2.6",
"@emotion/react": "^11.10.0",
"@emotion/styled": "^11.10.0",
"@types/react": "^18.0.15",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"framer-motion": "^6.0.0",
"chakra-ui-steps": "^1.7.3",

I tried copying first code example from docs and it threw this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'width')

So I tried to strip it down to minimal code

<Steps activeStep={0}>
  <Step>
    <Text>Hello</Text>
  </Step>
</Steps>

And it still throws the same error. Not sure how beneficial this would be but it shows error here

image

Any clue what is going on and how to fix it?

jeanverster commented 2 years ago

Hi! This seems to be quite a common issue, think I will add a section in the readme around this.. But it's likely you forgot the extend the chakra theme with the Steps configuration:

import { ChakraProvider, extendTheme } from '@chakra-ui/react';
import { StepsStyleConfig as Steps } from 'chakra-ui-steps';

const theme = extendTheme({
  components: {
    Steps,
  },
});

export const App = () => {
  return (
    <ChakraProvider theme={theme}>
      <App />
    </ChakraProvider>
  );
};
ablaszkiewicz commented 2 years ago

Thank you very much. I was about to change my profession to hair dresser.