ChrisThornham
ChrisThornham
PostsComments
SSolidJS
Created by ChrisThornham on 4/7/2025 in #support
Stuck On A Build Error
@Tommypop MUCH appreciated. Thank you.
28 replies
SSolidJS
Created by ChrisThornham on 4/7/2025 in #support
Stuck On A Build Error
I solved it. I was importing the SupabaseAuthContext outside of a component. 🤦‍♂️ That took about 7 hours to solve. It would be helpful if the error referenced the file causing the problem. It may be something to consider for the DX team. Thanks @Madaxen86 and @Tommypop for helping me narrow down this error.
28 replies
SSolidJS
Created by ChrisThornham on 4/7/2025 in #support
Stuck On A Build Error
Ok, thank you. I'll keep troubleshooting.
28 replies
SSolidJS
Created by ChrisThornham on 4/7/2025 in #support
Stuck On A Build Error
That's my config file
28 replies
SSolidJS
Created by ChrisThornham on 4/7/2025 in #support
Stuck On A Build Error
import { defineConfig } from "@solidjs/start/config";
/* @ts-ignore */
import pkg from "@vinxi/plugin-mdx";

const { default: mdx } = pkg;
export default defineConfig({
  ssr: false,
  server: {
    compressPublicAssets: {
      gzip: false,
      brotli: false,
    }
  },
  // server: { preset: "vercel" },
  extensions: ["mdx", "md"],
  vite: {
    plugins: [
      mdx.withImports({})({
        jsx: true,
        jsxImportSource: "solid-js",
        providerImportSource: "solid-mdx",
      }),
    ],
  },
});
import { defineConfig } from "@solidjs/start/config";
/* @ts-ignore */
import pkg from "@vinxi/plugin-mdx";

const { default: mdx } = pkg;
export default defineConfig({
  ssr: false,
  server: {
    compressPublicAssets: {
      gzip: false,
      brotli: false,
    }
  },
  // server: { preset: "vercel" },
  extensions: ["mdx", "md"],
  vite: {
    plugins: [
      mdx.withImports({})({
        jsx: true,
        jsxImportSource: "solid-js",
        providerImportSource: "solid-mdx",
      }),
    ],
  },
});
28 replies
SSolidJS
Created by ChrisThornham on 4/7/2025 in #support
Stuck On A Build Error
How do I build without pre-render?
28 replies
SSolidJS
Created by ChrisThornham on 4/7/2025 in #support
Stuck On A Build Error
Even with npm run dev I'm getting: 
TypeError: __vite_ssr_import_0__.default.init is not a function
TypeError: __vite_ssr_import_0__.default.init is not a function
28 replies
SSolidJS
Created by ChrisThornham on 4/7/2025 in #support
Stuck On A Build Error
@Madaxen86 , sorry for the length of that file. This project has become very complex so I added a lot of comments to keep myself straight.
28 replies
SSolidJS
Created by ChrisThornham on 4/7/2025 in #support
Stuck On A Build Error
Well, if I'm being fully honest, I'm not even totally sure what nitro-prerender means. I think it means, pre-render what you can on the server. This is a purely client-side application that is using SolidStart and Capacitor JS for mobile apps. So, technically, nothing needs to happen on the server. If I can just turn nitro-prerender off, that would be fine.
28 replies
SSolidJS
Created by ChrisThornham on 4/7/2025 in #support
Stuck On A Build Error
28 replies
SSolidJS
Created by ChrisThornham on 4/7/2025 in #support
Stuck On A Build Error
Of course. Would you like to see the context file?
28 replies
SSolidJS
Created by ChrisThornham on 4/7/2025 in #support
Stuck On A Build Error
The onMount hasn't been an issue in the past.
28 replies
SSolidJS
Created by ChrisThornham on 4/7/2025 in #support
Stuck On A Build Error
I also added it to a context provider, which would be initialized outside of the "App."
28 replies
SSolidJS
Created by ChrisThornham on 4/7/2025 in #support
Stuck On A Build Error
Yes.
28 replies
SSolidJS
Created by ChrisThornham on 4/25/2024 in #support
Help Me Stop Theme Flashing In SolidStart
The lightTheme and darkTheme values imported from my config file are just the DaisyUI theme strings like: 
export const lightTheme = "winter";
export const darkTheme = "night";
export const lightTheme = "winter";
export const darkTheme = "night";
Finally, I use the Theme Context Provider like this: 
import { Show, useContext } from "solid-js";
import { BiSolidSun } from "solid-icons/bi";
import { IoMoonSharp } from "solid-icons/io";
import { ThemeContext } from "~/context/theme-context";
import { ThemeContextType } from "~/types/theme";

export default function ThemeSwitch() {
  // CONTEXT ==========================================================
  const { lightTheme, darkTheme, isDarkMode, toggleTheme } = useContext(
    ThemeContext
  ) as ThemeContextType;

  // TSX ==============================================================
  return (
    <Show
      when={isDarkMode()}
      fallback={
        <button class="relative top-0.5 btn btn-xs btn-ghost btn-square">
          <BiSolidSun size={18} onClick={() => toggleTheme(lightTheme)} />
        </button>
      }
    >
      <button class="relative top-0.5 btn btn-xs btn-ghost btn-square">
        <IoMoonSharp size={18} onClick={() => toggleTheme(darkTheme)} />
      </button>
    </Show>
  );
}
import { Show, useContext } from "solid-js";
import { BiSolidSun } from "solid-icons/bi";
import { IoMoonSharp } from "solid-icons/io";
import { ThemeContext } from "~/context/theme-context";
import { ThemeContextType } from "~/types/theme";

export default function ThemeSwitch() {
  // CONTEXT ==========================================================
  const { lightTheme, darkTheme, isDarkMode, toggleTheme } = useContext(
    ThemeContext
  ) as ThemeContextType;

  // TSX ==============================================================
  return (
    <Show
      when={isDarkMode()}
      fallback={
        <button class="relative top-0.5 btn btn-xs btn-ghost btn-square">
          <BiSolidSun size={18} onClick={() => toggleTheme(lightTheme)} />
        </button>
      }
    >
      <button class="relative top-0.5 btn btn-xs btn-ghost btn-square">
        <IoMoonSharp size={18} onClick={() => toggleTheme(darkTheme)} />
      </button>
    </Show>
  );
}
Because isDarkMode() is coming from a Context provider, your app should have the value before the page loads meaning you'll see the correct colors or icons when the page loads. I hope that helps, Chris
23 replies
SSolidJS
Created by ChrisThornham on 4/25/2024 in #support
Help Me Stop Theme Flashing In SolidStart
It's been close to a year since I've worked on this, so my memory is weak. Here's my full Theme Context provider that stores the theme preference in local storage 
import { JSX, createContext, createSignal, onMount } from "solid-js";
import { lightTheme, darkTheme } from "../../../quickstart.config";

// Create and Export the Theme Context
export const ThemeContext = createContext();

interface themeProps {
  children?: JSX.Element | JSX.Element[];
}

export function ThemeProvider(props: themeProps) {
  // STATE ===
  const [isDarkMode, setIsDarkMode] = createSignal(false);

  // LIFECYCLE ===
  onMount(() => {
    // see if there is a theme in local storage.
    const theme = localStorage.getItem("theme");

    // if not, find the users preferred theme.
    if (!theme) {
      if (window.matchMedia("(prefers-color-scheme: dark)")) {
        setIsDarkMode(true);
        toggleTheme(darkTheme);
        localStorage.setItem("theme", darkTheme);
      } else {
        setIsDarkMode(false);
        toggleTheme(lightTheme);
        localStorage.setItem("theme", lightTheme);
      }
    } else {
      if (theme === darkTheme) {
        setIsDarkMode(true);
        toggleTheme(darkTheme);
      } else {
        setIsDarkMode(false);
        toggleTheme(lightTheme);
      }
    }
  });

  // FUNCTIONS ===
  function toggleTheme(colorTheme: string) {
    // update the darkmode state.
    setIsDarkMode(!isDarkMode());
    // data theme is for Daisy
    document.documentElement.setAttribute("data-theme", colorTheme);
    // Save the user's preference in localStorage or a cookie for persistence
    localStorage.setItem("theme", colorTheme);
  }

  // PROVIDER VALUES ===
  const sharedValues = {
    lightTheme,
    darkTheme,
    isDarkMode,
    toggleTheme,
  };

  // TSX ===
  return (
    <ThemeContext.Provider value={sharedValues}>
      {props.children}
    </ThemeContext.Provider>
  );
}
import { JSX, createContext, createSignal, onMount } from "solid-js";
import { lightTheme, darkTheme } from "../../../quickstart.config";

// Create and Export the Theme Context
export const ThemeContext = createContext();

interface themeProps {
  children?: JSX.Element | JSX.Element[];
}

export function ThemeProvider(props: themeProps) {
  // STATE ===
  const [isDarkMode, setIsDarkMode] = createSignal(false);

  // LIFECYCLE ===
  onMount(() => {
    // see if there is a theme in local storage.
    const theme = localStorage.getItem("theme");

    // if not, find the users preferred theme.
    if (!theme) {
      if (window.matchMedia("(prefers-color-scheme: dark)")) {
        setIsDarkMode(true);
        toggleTheme(darkTheme);
        localStorage.setItem("theme", darkTheme);
      } else {
        setIsDarkMode(false);
        toggleTheme(lightTheme);
        localStorage.setItem("theme", lightTheme);
      }
    } else {
      if (theme === darkTheme) {
        setIsDarkMode(true);
        toggleTheme(darkTheme);
      } else {
        setIsDarkMode(false);
        toggleTheme(lightTheme);
      }
    }
  });

  // FUNCTIONS ===
  function toggleTheme(colorTheme: string) {
    // update the darkmode state.
    setIsDarkMode(!isDarkMode());
    // data theme is for Daisy
    document.documentElement.setAttribute("data-theme", colorTheme);
    // Save the user's preference in localStorage or a cookie for persistence
    localStorage.setItem("theme", colorTheme);
  }

  // PROVIDER VALUES ===
  const sharedValues = {
    lightTheme,
    darkTheme,
    isDarkMode,
    toggleTheme,
  };

  // TSX ===
  return (
    <ThemeContext.Provider value={sharedValues}>
      {props.children}
    </ThemeContext.Provider>
  );
}
23 replies
SSolidJS
Created by ChrisThornham on 2/14/2025 in #support
Can I Block All Back Navigation?
Thank you @Madaxen86 !
3 replies
SSolidJS
Created by ChrisThornham on 1/21/2025 in #support
Error when evaluating SSR module EVEN WITH ssr: false
If anyone runs into a similar issue in the future, here's the fix. When working with RevenueCat, you have to initialize the service once, preferably at a "high" level in the app. I chose to initialize the service in app.tsx. However, context files cannot access RevenueCat when you initialize the service in app.tsx. Moving any required RevenueCat code inside of a route fixed the problem. I don't know why this happens; it likely has something to do with timing, but this is the solution.
2 replies
SSolidJS
Created by ChrisThornham on 12/5/2024 in #support
Help: Preflight OPTIONS Requests In SolidStart. I'm Lost!
I'm on it.
18 replies
SSolidJS
Created by ChrisThornham on 12/5/2024 in #support
Help: Preflight OPTIONS Requests In SolidStart. I'm Lost!
Ok. Thanks. Should I submit an official request somewhere to add an OPTIONS handler? I don't mind helping with that.
18 replies