Solid js context turns out undefined. What's happening?

[bospetersen]

I'm working on a project in Solid-js. Until a few days ago it worked fine…

But suddenly it gives me the following error:
ColorEditOpacityValue.tsx:9 Uncaught (in promise) TypeError: Cannot destructure property 'color' of 'usePaletteContext(...)' as it is undefined.

Everytime I save a file in development mode!

I have 3 context files surrounding the APP component and as far as I can see it’s only the usePaletteContext(...) that becomes undefined.

In the index.tsx file the context providers are wrapped like this

import { SessionContextProvider, useSessionContext } from './contexts/SessionContext'
import { PaletteContextProvider, usePaletteContext } from './contexts/PaletteContext'

const root = document.getElementById('root')


const Layout: Component<RouteSectionProps> = (props: any) => {


   const { login, setLogin } = useSessionContext()
   const { color, setColor } = usePaletteContext()
   const [development, setDevelopment] = createSignal(true)


   const navigate = useNavigate();


   createEffect(() => {
       if (login[0].sessionActive) {
           navigate("/colors-by-name", { replace: true });
       } else {
           navigate("/", { replace: true });
       }
   })


   return (


// More code here not relevant to the problem


function App() {
   return (
       <>
           <Router root={Layout}>
               <Route path={'/home'} component={FrontPage} />
               <Route path={'/'} component={FrontPage} />
               <Route path={'/colors-by-name'} component={ColorsByNamePage} />
               <Route path={'/colors-from-image'} component={ColorsFromImagePage} />
               <Route path={'/opacity'} component={ColorsOpacityPage} />
               <Route path={'/gradients'} component={ColorsGradientsPage} />
               <Route path={'/complementarities'} component={ColorsComplementaritiesPage} />
               <Route path={'/variables'} component={ColorsVariablesPage} />
           </Router>
       </>
   );
}
render(() => (
   <SessionContextProvider>
       <ColorContextProvider>
           <PaletteContextProvider>
               <App />
           </PaletteContextProvider>
       </ColorContextProvider>
   </SessionContextProvider>
), root!)
export default App

Every component that needs the context is setup as follows

import { usePaletteContext } from "../../../../contexts/PaletteContext";
import { useColorContext } from "../../../../contexts/ColorContext";


const ColorVariationFromSoilds: Component = () => {


 const paletteContext = usePaletteContext();


 if (!paletteContext) {
// Handle the case where context is undefined (e.g., render a loading state or default UI)
   return <div>Error: Please reload page </div>;
 }
 const { color, setColor } = usePaletteContext() as { color: any; setColor: any };
 const { colorInfo, setColorInfo } = useColorContext() as { colorInfo: any; setColorInfo: any };
// More code here

The following is the context file in its self:

import { createContext, useContext, type JSX } from "solid-js"
import { createStore } from "solid-js/store"
import ColorsOpacityPage from "../components/layout/pages/ColorsOpacityPage"


// ---------------------------------------------------------------------


export const PaletteContext = createContext()


// ---------------------------------------------------------------------


export const PaletteContextProvider = (props: { children: number | boolean | Node | JSX.ArrayElement | (string & {}) | null | undefined }) => {


   const [color, setColor] = createStore([{
       activeColor: "#FFFFFF",
       activeColorName: "White",
       activeColorRGB: "rgba(255, 255, 255, 1)",
       activeOpacityColor: "rgba(255, 255, 255, 1)",
       activeSolidOpacityColor: "rgba(255, 255, 255, 1)",
       activeSolidColor: "rgba(255, 255, 255, 1)", 
       backgroundColor: "rgba(255, 255, 255, 1)", 
       colorShade: "rgba(255, 255, 255, 1)",
       colorContrast: 0.00000,
       contrastThreshold: 0.15,
       colorModelRGBValue: "rgb(255, 255, 255)",
       colorModelHSLValue: "hsl(0, 100%, 100%)",
       colorModelHSVValue: "hsv(0, 0%, 100%)",
       colorModelHWBValue: "hwb(0, 100%, 0%)",
       colorModelHEXValue: "#FFFFFF",
       colorModelCMYKValue: "cmyk(0%, 0%, 0%, 0%)",
       colorIntervals: [1.00, 0.90, 0.80, 0.70, 0.60, 0.50, 0.40, 0.30, 0.20, 0.10],
       //---------------------------------------------------------------------
       colorClipboardCodes: [], 
       currentColorPalette: [], 
       //---------------------------------------------------------------------
       colorPalette: [], 
       colorPaletteState: [], 
       // ---------------------------------------------------------------------
       colorOpacityGroupNotes: [], 
       colorOpacitySelectedColors: [], 
       colorOpacitySelectedGroupColors: [], 
       //---------------------------------------------------------------------
       colorOpacityPalette: [], 
       colorOpacityPctPalette: [], 
       colorOpacityGroupPalette: [], 
       //---------------------------------------------------------------------
       currrentOpacityPalette: [], 
       currrentOpacityGroupPalette: [],
       //---------------------------------------------------------------------
       colorPicturePalette: [], 
       colorPicturePaletteGroups: [], 
       colorPicturePaletteGroupsUpdate: [], 
       colorPicturePaletteRow: [], 
       colorPixUniqueArray: [], 
       //---------------------------------------------------------------------
       opacityColorEdit: "rgba(255, 255, 255, 1)", 
       opacityPercentages: [ 
           { name: "100%", value: 1, isChecked: true },
           { name: "90%", value: 0.9, isChecked: false },
           { name: "80%", value: 0.8, isChecked: false },
           { name: "70%", value: 0.7, isChecked: true },
           { name: "60%", value: 0.6, isChecked: false },
           { name: "50%", value: 0.5, isChecked: false },
           { name: "40%", value: 0.4, isChecked: true },
           { name: "30%", value: 0.3, isChecked: false },
           { name: "20%", value: 0.2, isChecked: true },
           { name: "10%", value: 0.1, isChecked: false }
       ],
       paletteId: "",
       defaultTextColor: "rgba(0, 0, 0, 1)",
       solidOpacityColorEditing: "rgb(255, 255, 255)",
       solidOpacityColorOriginal: "rgb(255, 255, 255)"
   },
   // ---------------------------------------------------------------------
   // default palette values


   {
       opacityPercentages: [ 
           { name: "100%", value: 1, isChecked: true },
           { name: "90%", value: 0.9, isChecked: false },
           { name: "80%", value: 0.8, isChecked: false },
           { name: "70%", value: 0.7, isChecked: true },
           { name: "60%", value: 0.6, isChecked: false },
           { name: "50%", value: 0.5, isChecked: false },
           { name: "40%", value: 0.4, isChecked: true },
           { name: "30%", value: 0.3, isChecked: false },
           { name: "20%", value: 0.2, isChecked: true },
           { name: "10%", value: 0.1, isChecked: false }
       ],
   }])

   return (
       <PaletteContext.Provider value={{ color, setColor }}>
           {props.children}
       </PaletteContext.Provider>
   )
}

export const usePaletteContext = () => {
   return useContext(PaletteContext)
}

As I only see the problem with the usePaletteContext file I was wondering if the file is getting too big?
Or else how come it suddenly starts giving me problems and what can be done to solve it?

I have also looked into the Development HMR (Hot Module Replacement) issues, but I can’t find any way to solve it if that’s the problem…

/Bo

[bospetersen]

I found a solution to the problem...
In the context file do the following:

Move the context creation to a new file: PaletteCreateContext.tsx

// ---------------------------------------------------------------------

export const PaletteContext = createContext()

// ---------------------------------------------------------------------

Import PaletteCreateContext into the context file.

import { PaletteContext } from "./PaletteCreateContext"

...

That makes the useContext work again without having to reload it every time the HMR (Hot Module Replacement) is fired.

export const usePaletteContext = () => {
    return useContext(PaletteContext)
}

[KeepALifeUS]

Solution: SolidJS Context Undefined on HMR

This is a known issue with HMR (Hot Module Replacement) in SolidJS. When you save a file, HMR recreates components but the context reference becomes stale.

Fix 1: Add default value to createContext

// PaletteContext.tsx
export const PaletteContext = createContext<{
  color: typeof initialColor;
  setColor: SetStoreFunction<typeof initialColor>;
} | undefined>(undefined);

Fix 2: Create context with proper typing

import { createContext, useContext, ParentComponent } from "solid-js";
import { createStore, SetStoreFunction } from "solid-js/store";

type PaletteContextType = {
  color: ColorStore;
  setColor: SetStoreFunction<ColorStore>;
};

const PaletteContext = createContext<PaletteContextType>();

export const PaletteContextProvider: ParentComponent = (props) => {
  const [color, setColor] = createStore(initialValue);
  
  return (
    <PaletteContext.Provider value={{ color, setColor }}>
      {props.children}
    </PaletteContext.Provider>
  );
};

export const usePaletteContext = () => {
  const context = useContext(PaletteContext);
  if (!context) {
    throw new Error("usePaletteContext must be used within PaletteContextProvider");
  }
  return context;
};

Fix 3: Vite config for better HMR

// vite.config.ts
export default defineConfig({
  plugins: [solid()],
  server: {
    hmr: {
      overlay: false,
    },
  },
});

Root Cause

When HMR updates a module, it creates a NEW context reference. Components using the old reference get undefined. The fixes above ensure proper error handling and context stability.

Also check that you do not have duplicate imports of the context file with different paths (case sensitivity matters).