SolidJSS
SolidJS•3y ago•
1 reply
Je Suis Un Ami

Context Not Being Defined

I am running into a problem where the AuthContext isn't being defined in m app.
Here's my App component:
const App: Component = () => {
  console.log("Rendering App Component");
  return (
    <MetaProvider>
      <Title>{siteName}</Title>
      <AuthProvider>
        <Main />
      </AuthProvider>
    </MetaProvider>
  );
};

For convenience, here is my <mAIN /> component:
const Main: Component = () => {
  console.log("Rendering main");
  const [_, authenticated] = useAuthContext();
  console.log(`Authenticated: ${authenticated()}`);
  const Content = useRoutes(routes);
  return (
    <Router>
      <div class="h-full bg-white">
        <Show
          when={authenticated()}
          fallback={
            <DefaultLayout>
              <Content />
            </DefaultLayout>
          }
        >
          <ProfileProvider>
            <EnsureClientSetup>
              <AppProvider>
                <DashboardLayout>
                  <Content />
                </DashboardLayout>
              </AppProvider>
            </EnsureClientSetup>
          </ProfileProvider>
        </Show>
      </div>
    </Router>
  );
};

Essentially, the error being thrown is Uncaught TypeError: Cannot read properties of null, referring to the auth check being done by the authenticated() signal, defined in the AuthContext context.

Here is the slimmed down version of my AuthContext:
export const AuthProvider: ParentComponent = (props) => {
  console.log("Defining Auth Provider");
  // ... more code here

<ErrorBoundary
      fallback={(error: Error) => (
        <DefaultLayout>
          <span>
            <AppError error={error} onRetry={refresh} />
          </span>
        </DefaultLayout>
      )}
    >
      <Suspense>
        <AuthContext.Provider
          value={[
            auth,
            isAuthenticated,
            {
              authenticate: authenticate,
              refreshAuth: refresh,
              unauthenticate: unauthenticate,
            },
          ]}
        >
          {props.children}
        </AuthContext.Provider>
      </Suspense>
    </ErrorBoundary>
  );
}

export const useAuthContext = () => {
  return useContext(AuthContext)!;
};

In my logs, I know that AuthContext is not being defined because the print statement defined in it is never shown.
How would I fix this?
Was this page helpful?