SolidJS•4w ago

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()],
  })

4 Replies

Harry BoterOP•4w ago

Whenever I move CollectionHeader inside the provider (instead of passing it as a child) it works tho:

   <CollectionContext.Provider value={{ title }}>
      <CollectionHeader />
    </CollectionContext.Provider>

Madaxen86•4w ago

In solid you must not destructure props. the children in you context provider are not reactive because of that

joemoe•4w ago

Agree with @Madaxen86 Instead of

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

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

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

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

Change it to

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

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

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

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

joemoe•4w ago

Here is a good answer on that topic with some sources attached to the answer https://stackoverflow.com/a/76273022/754854

Stack Overflow

SolidJS: Why does destructuring of props cause a loss of reactivity?

Props are what we call the object that is passed to our component function on execution that represents all the attributes bound to its JSX. Props objects are readonly and have reactive properties ...

Gaming

Programming

Context provider breaks while using esbuild-plugin-solid

Did you find this page helpful?