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.

TypeScript Issue with NextJs 12 TypeError: utils.toMediaQueryString is not a function

See original GitHub issue

Description

Issue when running development mode causing a bug called TypeError: utils.toMediaQueryString is not a function

Link to Reproduction

None

Steps to reproduce

run yarn dev
Open localhost

Chakra UI Version

2.0.1

Browser

Google Chrome

Operating System

macOS
Windows
Linux

Additional Information

Attached logs

Server Error
TypeError: utils.toMediaQueryString is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
_loop
file:///Users/henrychea/Developer/app/app-web-application/node_modules/@chakra-ui/styled-system/dist/chakra-ui-styled-system.cjs.dev.js (2100:25)
resolver
file:///Users/henrychea/Developer/app/app-web-application/node_modules/@chakra-ui/styled-system/dist/chakra-ui-styled-system.cjs.dev.js (2124:18)
<unknown>
file:///Users/henrychea/Developer/app/app-web-application/node_modules/@chakra-ui/styled-system/dist/chakra-ui-styled-system.cjs.dev.js (2141:127)
useStyleConfigImpl
file:///Users/henrychea/Developer/app/app-web-application/node_modules/@chakra-ui/system/dist/chakra-ui-system.cjs.dev.js (366:18)
Object.useStyleConfig
file:///Users/henrychea/Developer/app/app-web-application/node_modules/@chakra-ui/system/dist/chakra-ui-system.cjs.dev.js (382:10)
<unknown>
file:///Users/henrychea/Developer/app/app-web-application/node_modules/@chakra-ui/button/dist/chakra-ui-button.cjs.dev.js (217:23)
renderWithHooks
file:///Users/henrychea/Developer/app/app-web-application/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5448:16)
renderForwardRef
file:///Users/henrychea/Developer/app/app-web-application/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5632:18)
renderElement
file:///Users/henrychea/Developer/app/app-web-application/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5795:11)
renderNodeDestructive
file:///Users/henrychea/Developer/app/app-web-application/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5875:11)

Issue Analytics

State:
Created a year ago
Reactions:6
Comments:6 (1 by maintainers)

Top GitHub Comments

5reactions

creotipcommented, May 25, 2022

Same problem here Screen Shot 2022-05-25 at 13 33 01

5reactions

isaachinmancommented, May 25, 2022

I don’t think this issue should be closed. I am still unable to resolve things with yarn, and I can reproduce this in an empty directory.

Doing yarn install @chakra-ui/react@2.0.0 leads to a bunch of Couldn't find any versions for "@chakra-ui/utils" errors.

@segunadebayo Can you please help to resolve these peer dependency issues?

Top Results From Across the Web

react.createContext" is not a function with Next.js 13 and ...

I'm using a Radix UI select component in Next.js 13 with Typescript and it throws this error: TypeError: $9g4ps$react.createContext is not a ......

Next.js + MUI v5 + Typescript tutorial and starter

To create a theme you need to import "createTheme" function and pass some theme options. Briefly, what I am going to do here...

nextjs typeerror: cannot read properties of undefined ...

You are fetching the data and passing it properly, but unfortunately, it is not an array, it's an object. The .map function is...

TypeError: self.processResponse is not a function - YouTube

What I found is a extension which is famous to devs"What Runs" is creating a conflict with Next.jsMessage:Error handling response: ...

Get Started with Material UI and Next.js in TypeScript

js Link component: // https://nextjs.org/docs/api-reference/next/link const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props, ref) { ...