Remix Outlet context / useOutletContext error

[BenDeGiglio]

I get an error ever time I try to pass values down from parent route to child. I've tried it in several different ways and all seem to result in the same error. I've boiled it down to a very simple example (actually the example on the react router site - modified a bit to load remix files). Any help on this would be much appreciated.

/routes/test/index.tsx

import * as React from "react";

import { Outlet, useOutletContext } from "@remix-run/react";
interface User {
  name: string;
}

type ContextType = { user: User | null };

export default function Dashboard() {
  const [user] = React.useState<User | null>(null);

  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet context={{ user }} />
    </div>
  );
}

export function useUser() {
  return useOutletContext<ContextType>();
}

/routes/test/$test.tsx

import { useUser } from "./index";

export default function DashboardMessages() {
  const { user } = useUser();
  return (
    <div>
      <h2>Messages</h2>
      <p>Hello, {user?.name}!</p>
    </div>
  );
}

error:
TypeError: Cannot destructure property 'user' of 'useUser(...)' as it is undefined.

Thanks in advance.

[grahamTIA]

I am having precisely the same issue, were you ever able to correct this?

[gundam0910]

you can use useOutletContext

[tmechsner]

Same here. Any ideas or solutions so far?

[akomm]

The error is outside of the code you've provided. Please create a reproduction of the issue: https://remix.new

[tmechsner]

In my case it was a stupid mistake. I tried to use the context from outside of the outlet container. 🫣