Provider context isn't being executed on SSR website before child component?

import { ErrorBoundary } from 'solid-js';
import Layout from '@/Layouts/SiteLayout';
import { PageProps } from '@/types/types';
// import { Container, Row, Col, Carousel, Button, Dropdown, ButtonGroup } from "solid-bootstrap";
import { withDialogProvider, Dialogs } from "@/Contexts/Dialog";
import ErrorPage from '@/Components/ErrorPage';

const Welcome = ({ color = "primary" }) => (
    withDialogProvider(( onDispatch ) => (
        <>
            <p>Hello, world!</p>
        </>
    ))
);

Welcome.layout = (page: PageProps) => {
    console.log({ page });

    return (
        <ErrorBoundary fallback={ error => <ErrorPage error={error} />}>
            <Layout props={page} page={<Welcome />} />
        </ErrorBoundary>
    );
};

export default Welcome;

import { ErrorBoundary } from 'solid-js';
import Layout from '@/Layouts/SiteLayout';
import { PageProps } from '@/types/types';
// import { Container, Row, Col, Carousel, Button, Dropdown, ButtonGroup } from "solid-bootstrap";
import { withDialogProvider, Dialogs } from "@/Contexts/Dialog";
import ErrorPage from '@/Components/ErrorPage';

const Welcome = ({ color = "primary" }) => (
    withDialogProvider(( onDispatch ) => (
        <>
            <p>Hello, world!</p>
        </>
    ))
);

Welcome.layout = (page: PageProps) => {
    console.log({ page });

    return (
        <ErrorBoundary fallback={ error => <ErrorPage error={error} />}>
            <Layout props={page} page={<Welcome />} />
        </ErrorBoundary>
    );
};

export default Welcome;

import { DefaultProps } from "@/types/types";
import { Navbar, Nav, NavDropdown, Container } from "solid-bootstrap";

import DialogProvider, { DialogType } from "@/Contexts/Dialog";

export default function SiteLayout({ children, props, page }: DefaultProps) {

    const dispatcher = (dialog: DialogType, visible: boolean = true) => {
        //
    };

    return (
        <DialogProvider callback={dispatcher}>
            <main class="header">
                {children && children || page}
            </main>
        </DialogProvider>
    );
}

import { DefaultProps } from "@/types/types";
import { Navbar, Nav, NavDropdown, Container } from "solid-bootstrap";

import DialogProvider, { DialogType } from "@/Contexts/Dialog";

export default function SiteLayout({ children, props, page }: DefaultProps) {

    const dispatcher = (dialog: DialogType, visible: boolean = true) => {
        //
    };

    return (
        <DialogProvider callback={dispatcher}>
            <main class="header">
                {children && children || page}
            </main>
        </DialogProvider>
    );
}

import { createContext, useContext } from 'solid-js';
import type { JSX, ParentProps, Context } from 'solid-js';
export type DIALOGS = { NEWMEMBER: 1, RXPRICING: 2, FINDMYRX: 3, ACTION2: 4, ACTION3: 5 };
export const Dialogs: DIALOGS = { NEWMEMBER: 1, RXPRICING: 2, FINDMYRX: 3, ACTION2: 4, ACTION3: 5 };
export type DialogType = DIALOGS[keyof DIALOGS] | string;
type DialogStateFn = (dialog: DialogType, visible?: boolean) => void;
type TChildFunc = (state: DialogStateFn) => JSX.Element;
let Dialog: Context<DialogStateFn> | undefined = undefined;

export default function Context ({ children, callback }: ParentProps<{ callback: DialogStateFn }>) {
    if (Dialog === undefined) {
        Dialog = createContext<DialogStateFn>(callback);
        console.log("Initializing?");
    }

    return (
        <Dialog.Provider value={callback}>
            {children}
        </Dialog.Provider>
    );
};

export function useDialogCtx() {
    if (Dialog === undefined) {
        throw new Error("'Dialog' context provider not yet initialized.");
    }
    else return useContext(Dialog);
}

export const withDialogProvider = (callback: TChildFunc) => callback(useDialogCtx());

import { createContext, useContext } from 'solid-js';
import type { JSX, ParentProps, Context } from 'solid-js';
export type DIALOGS = { NEWMEMBER: 1, RXPRICING: 2, FINDMYRX: 3, ACTION2: 4, ACTION3: 5 };
export const Dialogs: DIALOGS = { NEWMEMBER: 1, RXPRICING: 2, FINDMYRX: 3, ACTION2: 4, ACTION3: 5 };
export type DialogType = DIALOGS[keyof DIALOGS] | string;
type DialogStateFn = (dialog: DialogType, visible?: boolean) => void;
type TChildFunc = (state: DialogStateFn) => JSX.Element;
let Dialog: Context<DialogStateFn> | undefined = undefined;

export default function Context ({ children, callback }: ParentProps<{ callback: DialogStateFn }>) {
    if (Dialog === undefined) {
        Dialog = createContext<DialogStateFn>(callback);
        console.log("Initializing?");
    }

    return (
        <Dialog.Provider value={callback}>
            {children}
        </Dialog.Provider>
    );
};

export function useDialogCtx() {
    if (Dialog === undefined) {
        throw new Error("'Dialog' context provider not yet initialized.");
    }
    else return useContext(Dialog);
}

export const withDialogProvider = (callback: TChildFunc) => callback(useDialogCtx());