Upgrading to 1.0.4 gives: Error: useStyles: `styles` is undefined. Seems you forgot to wrap the components in `<StylesProvider />` when using `next build`

I have just upgraded from 1.0.0 > 1.0.4 and when doing next build I recieve the following error:

Error occurred prerendering page "/blog/products/skincare/vitamin-c". Read more: https://err.sh/next.js/prerender-error
Error: useStyles: `styles` is undefined. Seems you forgot to wrap the components in `<StylesProvider />` 
    at useContext (/var/www/bp/frontend/node_modules/@chakra-ui/utils/dist/cjs/react-helpers.js:40:13)
    at Object.render (/var/www/bp/frontend/node_modules/@chakra-ui/layout/dist/cjs/list.js:106:38)
    at a.b.render (/var/www/bp/frontend/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:43:194)
    at a.b.read (/var/www/bp/frontend/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
    at exports.renderToString (/var/www/bp/frontend/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
    at Object.renderPage (/var/www/bp/frontend/node_modules/next/dist/next-server/server/render.js:52:851)
    at Function.getInitialProps (/var/www/bp/frontend/.next/server/pages/_document.js:295:19)
    at loadGetInitialProps (/var/www/bp/frontend/node_modules/next/dist/next-server/lib/utils.js:5:101)
    at renderToHTML (/var/www/bp/frontend/node_modules/next/dist/next-server/server/render.js:52:1142)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

its unclear to me what is causing this. I believe we need to use StylesProvider as suggested here, https://chakra-ui.com/docs/theming/component-style but this was working in 1.0.0.

_app.tsx

const appTheme = {
  styles,
  breakpoints,
  colors,
  components,
  ...fonts,
}
export const theme = extendTheme(appTheme)


export default function App({ Component, pageProps }: AppProps): JSX.Element {
  return (
    <ChakraProvider resetCSS theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  )

I could not create a codepen for this, but here is my whole lengthy dependencies:

"dependencies": {
    "@chakra-ui/react": "^1.0.4",
    "@chakra-ui/theme-tools": "^1.0.2",
    "@contentful/rich-text-react-renderer": "^14.1.1",
    "@contentful/rich-text-types": "^14.1.1",
    "@emotion/react": "^11.0.0",
    "@emotion/styled": "^11.0.0",
    "@zeit/next-source-maps": "^0.0.4-canary.
    "next": "^10.0.2",
    "next-compose-plugins": "^2.2.0",
    "next-pwa": "^5.0.0",
    "next-seo": "^4.17.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
  },

[hutber]

We have narrowed down the issue guys, I believe this is completely our fault, but I thought I would say: We were missing the <UnorderedList> when we rendered, so the fix was as follows:

    <UnorderedList>
      <ListItem listStyleType='"- "'>{children}</ListItem>
    </UnorderedList>

Sorry for the time used up, hopefully it will help if somebody else has a similar issue.

[jmiazga]

Are you using FormLabel, FormErrorMessage, or FormHelperText that arent nested in a FormControl?