NextJS SSR TSX: TypeError: Cannot read properties of undefined (reading 'width')

[DarwinVA]

I'm trying to try the "Basic Example" (https://www.npmjs.com/package/chakra-ui-steps) on my Next Js + TS project , but got a compile error.

This is my /pages/_app.tsx

import { ChakraProvider, extendTheme } from "@chakra-ui/react";
import { AppProps } from "next/app";
import { Provider } from "react-redux";
import { StepsStyleConfig as Steps } from "chakra-ui-steps";
import store from "../store";

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

const App = ({ Component, pageProps }: AppProps) => {
  return (
    <Provider store={store}>
      <ChakraProvider>
        <Component {...pageProps} />
      </ChakraProvider>
    </Provider>
  );
};
export default App;

This is my StepsExample component

import { Button, Flex, Text } from "@chakra-ui/react";
import { Step, Steps, useSteps } from "chakra-ui-steps";

const content = (
  <Flex py={4}>
    <Text p={1}>Hello world!</Text>
  </Flex>
);

const steps = [
  { label: "Step 1", content },
  { label: "Step 2", content },
  { label: "Step 3", content },
];

export const StepsExample = () => {
  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({
    initialStep: 0,
  });

  return (
    <Flex flexDir="column" width="100%">
      <Steps activeStep={activeStep}>
        {steps.map(({ label, content }) => (
          <Step label={label} key={label}>
            {content}
          </Step>
        ))}
      </Steps>
      {activeStep === steps.length ? (
        <Flex p={4}>
          <Button mx="auto" size="sm" onClick={reset}>
            Reset
          </Button>
        </Flex>
      ) : (
        <Flex width="100%" justify="flex-end">
          <Button
            isDisabled={activeStep === 0}
            mr={4}
            onClick={prevStep}
            size="sm"
            variant="ghost"
          >
            Prev
          </Button>
          <Button size="sm" onClick={nextStep}>
            {activeStep === steps.length - 1 ? "Finish" : "Next"}
          </Button>
        </Flex>
      )}
    </Flex>
  );
};

Context:

└─$ node -v
v17.7.1
└─$ yarn -v
1.22.17
└─$ npm -v
8.5.2

I'm using Next JS 12.1.0 with Typescript (yarn create next-app demo --typescript)
"next": "12.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"chakra-ui-steps": "^1.6.2",
"@chakra-ui/react": "^1.8.6",
"@emotion/react": "^11",
"@emotion/styled": "^11",

Output:

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

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Object.render
file:///path_of_my_project/node_modules/chakra-ui-steps/dist/chakra-ui-steps.cjs.development.js (317:25)
ReactDOMServerRenderer.render
file:///path_of_my_project/node_modules/react-dom/cjs/react-dom-server.node.development.js (3872:44)
ReactDOMServerRenderer.read
file:///path_of_my_project/node_modules/react-dom/cjs/react-dom-server.node.development.js (3690:29)
Object.renderToString
file:///path_of_my_project/node_modules/react-dom/cjs/react-dom-server.node.development.js (4298:27)
Object.renderPage
file:///path_of_my_project/node_modules/next/dist/server/render.js (751:45)
Object.defaultGetInitialProps
file:///path_of_my_project/node_modules/next/dist/server/render.js (389:51)
Function.getInitialProps
node_modules/next/dist/pages/_document.js (145:19)
Object.loadGetInitialProps
file:///path_of_my_project/node_modules/next/dist/shared/lib/utils.js (69:29)
renderDocument
file:///path_of_my_project/node_modules/next/dist/server/render.js (764:48)
Object.renderToHTML
file:///path_of_my_project/node_modules/next/dist/server/render.js (828:34)

[JackNgWeiMing]

try pass the theme into ChakraProvider in _app.tsx, e.g. :

const theme= extendTheme(...)

// pass 'theme' into provider
<ChakraProvider theme={theme}>
        <Component {...pageProps} />
 </ChakraProvider>

[DarwinVA]

try pass the theme into ChakraProvider in _app.tsx, e.g. :

const theme= extendTheme(...)

// pass 'theme' into provider
<ChakraProvider theme={theme}>
        <Component {...pageProps} />
 </ChakraProvider>

This is shameful. I can't believe that not even copying the code from _app.tsx did I realize that I didn't pass the "theme" property to ChakraProvider.

This issue is obviously already resolved, thank you very much for that. As I thought about how to hide this lapse from the internet and try to get on with my life it occurred to me that maybe something useful could be gleaned from this: the suggestion to add an informative message for this error.

I see there are other "issues" similar to this. So I think that at least one more informative message can save a few more minutes of our life and avoid creating new "issues" for more clumsy people like me.

Thank you very much again!