<NoName/> when trying to console.log a JSX function named App

huseeiin commented 1 year ago

function App() {
  return <div>Hello World</div>;
}

console.log(<App />);

logs:

piyusharorawork commented 11 months ago

I have tested the issue in 1.0.3 and still I can see this issue persists

I tried the sample example as given in https://bun.sh/docs/runtime/loaders#jsx

function Component(props: {message: string}) {
  return (
    <body>
      <h1 style={{color: 'red'}}>{props.message}</h1>
    </body>
  );
}

console.log(<Component message="Hello world!" />);

logs

<NoName message="Hello world!" />

Tatli commented 9 months ago

Adding export before function... "fixed" it.

Essentially:

export function Component(props: { message: string }) {
  return (
    <body>
      <h1 style={{ color: 'red' }}>{props.message}</h1>
    </body>
  );
}

console.log(<Component message="Hello world!" />);

instead of

function Component(props: { message: string }) {
  return (
    <body>
      <h1 style={{ color: 'red' }}>{props.message}</h1>
    </body>
  );
}

console.log(<Component message="Hello world!" />);

Console log without export

~/projects/bun/quickstart# bun run Component.tsx
<NoName message="Hello world!" />

Console log with export

~/projects/bun/quickstart# bun run Component.tsx
<Component message="Hello world!" />

Tested on version: 1.0.18 and also used this example: bun.sh/docs/runtime/loaders#jsx

oven-sh / bun

<NoName/> when trying to console.log a JSX function named App #4104