Harry Boter Posts - Answer Overflow

Harry Boter

•Created by Harry Boter on 2/9/2025 in #support

Context provider breaks while using esbuild-plugin-solid

I don't know if the problem is actually related to building component with esbuild with esbuild-plugin-solid, but whenever I call useContext from a child component, context is undefined. Am I missing something? Wrapper:

export default function CollectionWrapper() {
  return (
    <CollectionProvider>
      <CollectionHeader />
    </CollectionProvider>
  )
}

Provider:

import { createContext, createSignal, useContext } from "solid-js"

const CollectionContext = createContext()

export function CollectionProvider({ children }) {
  const [title, setTitle] = createSignal("My title")

  return (
    <CollectionContext.Provider value={{ title }}>
      {children}
    </CollectionContext.Provider>
  )
}

export function useCollection() {
  const context = useContext(CollectionContext)
  if (!context) {
    throw new Error("useCollection must be used within a CollectionProvider")
  }
  return context
}

export { CollectionContext }

Header:

export default function CollectionHeader(d) {
  const {title } = useCollection()

  return (
    <div className="CollectionHeader">
      <h2>{title}</h2>
    </div>
  )
}

Esbuild script:

  await esbuild.build({
    entryPoints: entryPoints.map(({ path }) => path),
    bundle: true,
    outdir: outputDir,
    splitting: true,
    format: "esm",
    platform: "browser",
    loader: { [JSX_EXTENSION]: JSX_EXTENSION.slice(1) },
    conditions: ["development", "browser"],
    plugins: [solidPlugin()],
  })

5 replies

Gaming

Programming