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)
}