question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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",
  },

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

9reactions
hutbercommented, Dec 18, 2020

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.

3reactions
jmiazgacommented, Dec 18, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

useStyles: `styles` is undefined. Seems you forgot to wrap the ...
Description Using Next.js, when I run next dev and visit a pre-rendered, static page it gives the above error, when I expect it...
Read more >
How to fix this error "Error: You are calling withStyles(styles ...
withStyles is a higher order component: you give it a component, and it will return a new component wrapped around yours.
Read more >
How to use NextAuth.js for client-side authentication in Next.js
In this article, we'll walk you through how to set up client-side authentication that doesn't require a password in Next.js using a powerful ......
Read more >
Build a blog with Next (React.js) and Strapi
In this tutorial, you will learn to create a blog website using Strapi for the back-end and Next.js for the front-end. Next.js is...
Read more >
Why you should use Chakra UI in React - dastasoft
I have tried some component libraries like Material UI, Antd, React Boostrap and other CSS frameworks like styled-components, TailwindCSS and so ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found