[@types/react] createContext – An argument for 'defaultValue' was not provided.

[alfonmga]

Is there any reason of why the argument defaultValue is not optional here?

import * as React from 'react';
import * as firebase from 'firebase/app';

interface AuthProps {
  children: any;
}
interface AuthState {
  user: firebase.User | null;
}
interface AuthContextProps extends AuthState {
  updateUser(user: firebase.User | null): void;
}

export const AuthContext = React.createContext<AuthContextProps>(); // <-- ERROR HERE!

// export const AuthConsumer = AuthContext.Consumer;
export const AuthProvider = (props: AuthProps) => {
  const [state, setState] = React.useState<AuthState>({
    user: null,
  });

  const updateUser = (user: firebase.User | null) => setState({ user });

  return (
    <AuthContext.Provider
      value={{
        updateUser,
        user: state.user,
      }}
    >
      {props.children}
    </AuthContext.Provider>
  );
};

Docs url: https://reactjs.org/docs/context.html#reactcreatecontext

The defaultValue argument is only used when a component does not have a matching Provider above it in the tree.

I have a matching Provider above in the tree, so I should be able to create a context without set a default value or I'm wrong?

[alfonmga]

I'm closing this issue for now. If someone thinks this is a real issue then be free to contribute.

[nandorojo]

Not having a default value is keeping my typescript run build from working. Is there any way to make this optional?

[zeekrey]

If you want to compile your code without a default value you can init it with null.

export const AuthContext = React.createContext(null)

[JoshuaKGoldberg]

The null solution no longer works for me. I'll file a new issue.

Edit: no, #34854 mentions why. AH well.

[romenkova]

I would also try this:
const AuthContext = React.createContext<AuthContextProps | null>(null) as React.Context<AuthContextProps>;

It looks like a dirty hack that could lead to future problems. But in my case, I have a class instance as a value for the context, so If I pass it as a default value, it initializes 2 times - in the provider's value prop and here.

[VKBobyr]

The null option is not optimal at all, since you have to do null checks later, but I don't think there's another way, since whatever you're passing into the context is indeed empty for a certain period of time.

[jacksonblankenship]

I know this thread is old but here's a solution that doesn't require null checks.

interface SomeProps {
  /* your interface */
}

const SomeContext = createContext<SomeProps>(null!);

[antonkarpach]

What about empty obj?
export const SomeContext = createContext({});

[lucasbasquerotto]

An empty object will not work if the interface have required fields.

I'm doing a cast while this issue is not solved (if it will ever be):

// instead of:
// export const SomeContext = createContext<SomeProps>({});
export const SomeContext = createContext({} as SomeProps);