TypeError: Cannot destructure property 'username' of '(0 , react__WEBPACK_IMPORTED_MODULE_0__.useContext)(...)' as it is undefined.

[ZhechengLiao]

I think it might not import the username, but I check a lot of time, I did't find anything different with ur code, pls help me!!!

// pages\index.js
import React, { useContext } from "react";

import { Context } from "../context";

import { useRouter } from "next/router";

import axios from "axios";

export default function Auth() {

const { username, setUsername, secret, setSecret } = useContext(Context);

// context\index.js
import React, { useState, createContext} from "react";

export const Context = createContext();

export const ContextProvider = (props) => {
    const [username, setUsername] = useState("");
    const [secret, setSecret] = useState("");

    const value = {
        username,
        setUsername,
        secret,
        setSecret,
    };

    return <Context.Provider value={value}>{props.children}</Context.Provider>;
};

[lry41]

hello, have you fix this ?

[roshan-ican]

I am stuck at the similar problem