Splitting context consumer to another file doesn't work

[ooker777]

According to this comment, using context consumer instead of useContext() hook is workable. However I can only do that when they are in the same file. When splitting the consumer to another file I have the below result. I'm not sure if it's a bug or not, but it's similar to the case of splitting component overwrite the final result.

routes/index.tsx

import { createContext } from 'preact'
import UsernameConsumer from "../components/User.tsx";

export const Username = createContext()

export default function App() {
  return (
    // provide the username value to our subtree:
    <Username.Provider value="Bob">
      <UsernameConsumer />
    </Username.Provider>
  )
}

User.tsx

import { Username } from '../routes/index.tsx'
export default function UsernameConsumer(Username){
  return (
    <Username.Consumer>
      {username => (
        <span>{username}</span>
      )}
    </Username.Consumer>
  ) 
} 

Log on terminal:

Add @babel/plugin-transform-react-jsx-source to get a more detailed component stack. Note that you should not add it to production builds of your App for bundle size reasons.
An error occurred during route handling or page rendering.
Error: Undefined component passed to createElement()

You likely forgot to export your component or might have mixed up default and named imports<#text>..</#text>

  in #text
  in UsernameConsumer
  in App
  in 
  in Component
  in App
  in 

    at a.__b (https://esm.sh/stable/preact@10.19.2/denonext/debug.js:10:352)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2611)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)

Log on the HTML

An error occurred during route handling or page rendering.

   7 |     // provide the username value to our subtree:
   8 |     <Username.Provider value="Bob">
>  9 |       <UsernameConsumer />
     |        ^
  10 |     </Username.Provider>
  11 |   )
  12 | }

ReferenceError: UsernameConsumer is not defined
    at Object.App (file:///D:/Programming/web/fresh-project/routes/index.tsx:9:8)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3237)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)

[ooker777]

Never mind in User.tsx I shouldn't put Username as the argument for the component. The correct code should be:

import { Username } from '../routes/index.tsx'
export default function UsernameConsumer(){
  return (
    <Username.Consumer>
      {username => (
        <span>{username}</span>
      )}
    </Username.Consumer>
  ) 
} ```