LUM4010: Island reads context provided by the page

Severity: warning · Category: islands and boundaries (4xxx)

Reported by: the server runtime (lumiose/server), as a console warning in development, once per island.

#What it means

Each island hydrates in the browser as its own root: nothing the page rendered around it exists there, including the values the page passed down with a <Ctx value> provider. So that the server HTML and the hydrated island agree, the island starts from a fresh root on the server too. Its useContext() calls see only values provided inside the island, and otherwise the context's default.

This warning means the page did provide the context above the island. The island does not see that value, on the server or in the browser.

#Example

tsx

const Theme = createContext("light");

export default function Page() {
  return (
    <Theme value="dark">
      <ThemeToggle client:load />
    </Theme>
  );
}

export function ThemeToggle() {
  const theme = useContext(Theme); // "light": the page's "dark" stays outside the island
  return <button>{theme}</button>;
}

#How to fix it

Pass the value as an island prop: <ThemeToggle client:load theme="dark" />. Props are sent to the browser, so they must be plain data (LUM4002).
Provide the context inside the island, in the island component or a component it renders.
Share state between islands with defineState(): one instance per page in the browser, one per request on the server, with the server's values sent to the islands (see Sharing state).

Contexts provided inside the island work as usual on both sides.

#What it means

#Example

#How to fix it

#Related