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 issueI 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:
- Created 3 years ago
- Comments:8 (4 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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:Sorry for the time used up, hopefully it will help if somebody else has a similar issue.
Are you using
FormLabel
,FormErrorMessage
, orFormHelperText
that arent nested in aFormControl
?