Error: invalid hook call using

Answered

Chinese perch posted this in #help-forum

Open in Discord

Chinese perchOP

2023-06-22T13:21:53.000Z

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: Cannot read properties of null (reading 'useContext')
at useContext (E:\anshu\js3\nextjs-blog\node_modules\react\cjs\react.development.js:1618:21)
at useColorMode (file:///E:/anshu/js3/nextjs-blog/node_modules/@chakra-ui/color-mode/dist/chunk-7NLW6UB6.mjs:6:19)
at eval (webpack-internal:///./pages/_app.js:18:104)
- warn Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload

Happening due to _app.js

import '../styles/global.css';
import { ChakraProvider, IconButton, useColorMode } from '@chakra-ui/react'
import { MoonIcon, SunIcon } from "@chakra-ui/icons";

const { colorMode, toggleColorMode } = useColorMode();

export default function App({ Component, pageProps }) {

  return (
    <ChakraProvider>
      <IconButton
        icon={colorMode === "light" ? <SunIcon /> : <MoonIcon />}
        onClick={toggleColorMode}
        mr={4}
        variant="outline"
      ></IconButton>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

Answered by maxswjeon

ColorModeButton.js

export default function ColorModeButton() {
  const { colorMode, toggleColorMode } = useColorMode(); // Now the useColorMode will work
  return (    
      <IconButton
        icon={colorMode === "light" ? <SunIcon /> : <MoonIcon />}
        onClick={toggleColorMode}
        mr={4}
        variant="outline"
      />
  )
}

App.js

export default function App({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <ColorModeButton />
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

View full answer

104 Replies

Chinese perchOP

2023-06-22T13:22:27.000Z

I used chakra to try and create a dark mode toggler

const { colorMode, toggleColorMode } = useColorMode();

<IconButton
  icon={colorMode === "light" ? <SunIcon /> : <MoonIcon />}
  onClick={toggleColorMode}
  mr={4}
  variant="outline"
></IconButton>

this itself works

Original message was deleted

Chinese perchOP

2023-06-22T13:23:20.000Z

can you possibly explain? I'm new to next

client side rendering?

2023-06-22T13:24:04.000Z

Move

const { colorMode, toggleColorMode } = useColorMode();

Into App

@Chinese perch client side rendering?

Alfonsus Ardani

2023-06-22T13:24:42.000Z

sorry nvm, this is pages router...

Chinese perchOP

2023-06-22T13:24:52.000Z

uh.. ok

2023-06-22T13:24:54.000Z

Since useColorMode is a hook and as App is used in there, there is no need to use "use client" here

@Alfonsus Ardani sorry nvm, this is pages router...

2023-06-22T13:25:04.000Z

Yup I think it is too

Chinese perchOP

2023-06-22T13:25:33.000Z

Server Error
TypeError: Cannot read properties of null (reading 'useContext')

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
pages_app.js (5:51) @ useColorMode

  3 | import { MoonIcon, SunIcon } from "@chakra-ui/icons";
  4 | 
> 5 | const { colorMode, toggleColorMode } = useColorMode();
    |                                                 ^
  6 | 
  7 | export default function App({ Component, pageProps }) {
  8 | const { colorMode, toggleColorMode } = useColorMode();

@maxswjeon Move const { colorMode, toggleColorMode } = useColorMode(); Into `App`

Chinese perchOP

2023-06-22T13:25:57.000Z

I had tried that before too. error is above

2023-06-22T13:26:20.000Z

Oh I see

Chinese perchOP

2023-06-22T13:26:31.000Z

oh wait

Wait

2023-06-22T13:26:33.000Z

so the useColorMode should be inside the ChakraProvider

Okay

Chinese perchOP

2023-06-22T13:26:37.000Z

My bad

my bad

@maxswjeon so the `useColorMode` should be inside the `ChakraProvider`

Chinese perchOP

2023-06-22T13:26:57.000Z

The page now loads, but the button does not work

2023-06-22T13:27:19.000Z

So how did you moved the useColorMode now?

I think the Button should be a seperate component in seperate file

@maxswjeon So how did you moved the `useColorMode` now?

Chinese perchOP

2023-06-22T13:28:10.000Z

same as you said

export default function App({ Component, pageProps }) {
  const { colorMode, toggleColorMode } = useColorMode();

  return (
    <ChakraProvider>
      <IconButton
        icon={colorMode === "light" ? <SunIcon /> : <MoonIcon />}
        onClick={toggleColorMode}
        mr={4}
        variant="outline"
      ></IconButton>
      <Component {...pageProps} />
    </ChakraProvider>
  )

I had left the old instace there

the first time

@maxswjeon I think the Button should be a seperate component in seperate file

Chinese perchOP

2023-06-22T13:28:36.000Z

the iconButton component?

2023-06-22T13:28:58.000Z

So, the ChakraProvider Provides the Context for useColorMode, so the useColorMode cannot be in the App.tsx, but in a seperate file.

Create a ColorModeButton.tsx or such to write as below

Chinese perchOP

2023-06-22T13:29:59.000Z

don't mind me asking,

i've been using .js files till now

what is tsx

It gives a react symbol

jsx?

2023-06-22T13:30:21.000Z

Oh

I'm used to typescript so nvm

Chinese perchOP

2023-06-22T13:30:37.000Z

oh right

typescript

2023-06-22T13:31:15.000Z

ColorModeButton.js

export default function ColorModeButton() {
  const { colorMode, toggleColorMode } = useColorMode(); // Now the useColorMode will work
  return (    
      <IconButton
        icon={colorMode === "light" ? <SunIcon /> : <MoonIcon />}
        onClick={toggleColorMode}
        mr={4}
        variant="outline"
      />
  )
}

App.js

export default function App({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <ColorModeButton />
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

Answer

Chinese perchOP

2023-06-22T13:32:26.000Z

do I still have to set the

useColorMode()

in _app.js?

2023-06-22T13:32:50.000Z

my bad, remove it. (I updated the Code)

Chinese perchOP

2023-06-22T13:32:55.000Z

sure

@maxswjeon my bad, remove it. (I updated the Code)

Chinese perchOP

2023-06-22T13:33:58.000Z

what about the import statement?

import {themeToggle} from '../components/themeToggle.js';

??

like this?

2023-06-22T13:35:50.000Z

Since the module is exported as default (check the export default) so you can import module as

import ThemeToggle from "../components/themeTogge.js"

Also, I recommend PascalCase (using captial letters for first and every space)

@maxswjeon Since the module is exported as default (check the `export default`) so you can import module as javascript import ThemeToggle from "../components/themeTogge.js" Also, I recommend PascalCase (using captial letters for first and every space)

Chinese perchOP

2023-06-22T13:36:45.000Z

Got it. I call it CamelCase

Thanks so much, it worked

2023-06-22T13:37:36.000Z

camelCase is the one which starts with small case

FYI

Chinese perchOP

2023-06-22T13:37:42.000Z

ohh

New information

Thanks again

Chinese perchOP

2023-06-22T13:43:33.000Z

Hey!

2023-06-22T13:43:39.000Z

Yup

Chinese perchOP

2023-06-22T13:45:12.000Z

I have a doubt about the positioning. what unit is used? cause it works even without units. I want to place the icon on the top right corner. so I used this:

<Box pos="absolute" top="0" left="100vw">
  <IconButton
    icon={colorMode === "light" ? <SunIcon /> : <MoonIcon />}
    onClick={toggleColorMode}
    mr={4}
    variant="outline"
  ></IconButton>
</Box>

This places it too much to the right. it goes out of the screen

2023-06-22T13:47:13.000Z

https://chakra-ui.com/docs/styled-system/theme#sizes

Unit used in Chakra UI is 0.25rem if you don't provide the unit.

Chinese perchOP

2023-06-22T13:47:33.000Z

Why doesn't 100vw work though?

I used to use it before in some of my projects and it never worked properly

2023-06-22T13:48:18.000Z

100vw will move one screen-width right, since the vw is 1/100 of screen width

Chinese perchOP

2023-06-22T13:48:34.000Z

exactly

so

It should be properly positioned right?

oohh

I get it

nvm

It moves it 1 screen right

So the left edge is on the screen edge

2023-06-22T13:49:39.000Z

Yup. use right="0" for it (If I understanded right)

Yes!

Chinese perchOP

2023-06-22T13:52:06.000Z

I'm very sorry if I'm disturbing you

screenshot is from the top

it worked with left

-50 value works, but why not 0?

2023-06-22T13:53:40.000Z

Hmm that's strange

Chinese perchOP

2023-06-22T13:53:48.000Z

I got it

2023-06-22T13:53:51.000Z

Okay

Chinese perchOP

2023-06-22T13:53:58.000Z

Seems like there is a div there

Why though

2023-06-22T13:54:31.000Z

What div?

Chinese perchOP

2023-06-22T13:54:50.000Z

2023-06-22T13:55:16.000Z

If you use pages, Next will create a div called #__next to render React Componetns

Chinese perchOP

2023-06-22T13:55:23.000Z

ic

so... src or smth?

2023-06-22T13:55:38.000Z

You can style them with external css file

but It's weird... Normally it should be not styled.

Can you show me your App.js ?

@maxswjeon Can you show me your `App.js` ?

Chinese perchOP

2023-06-22T13:56:48.000Z

import '../styles/global.css';
import { ChakraProvider, IconButton, useColorMode } from '@chakra-ui/react'
import { MoonIcon, SunIcon } from "@chakra-ui/icons";
import ThemeToggle  from '../components/ThemeToggle.js';

export default function App({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <ThemeToggle  />
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

2023-06-22T13:57:08.000Z

Oh I see, can you provide the styles/global.css too?

Chinese perchOP

2023-06-22T13:58:46.000Z

is it this causing the issue? I didn't actually see this file. it's the default code from the next tutorial

html,
body {
  font-family: var(--font-family);
  line-height: 1.6;
  font-size: 18px;
}

* {
  box-sizing: border-box;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

its not. I though border box might have a difference

I removed everything and tried

No change

2023-06-22T14:00:02.000Z

Hmm...

Can you show me the Elements Page (not the React Component Page) of the Developer console, selecting div#__next?

Chinese perchOP

2023-06-22T14:01:35.000Z

2023-06-22T14:02:40.000Z

Hmm.. that's really odd

Chinese perchOP

2023-06-22T14:07:12.000Z

Something that might narrow it down perhaps? I found that the difference in height changes depending on the page and the content it has

so it's not due to any global css

or js

2023-06-22T14:08:25.000Z

Is the global.css empty? (or removed?) If I were you, I would start checking the html and body styles first.

Chinese perchOP

2023-06-22T14:08:39.000Z

I empty'd it and checked

no change

2023-06-22T14:09:09.000Z

Might be the #__next 's css position is not relative (because it's static in default) so it can make a problem