tsx fails on fresh repo (JSX element implicitly has type 'any')

pinkboid commented 1 year ago

What version of Bun is running?

1.0.0+822a00c4d508b54f650933a73ca5f4a3af9a7983

What platform is your computer?

Darwin 22.3.0 arm64 arm

What steps can reproduce the bug?

mkdir project && cd project && bun init -y && touch react.tsx

react.tsx

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

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

What is the expected behavior?

No VSCode Intellisense errors, can run

What do you see instead?

VSCode Intellisense errors, can't run

JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.ts(7026)
any

bun run react.tsx 

error: Cannot find module "react/jsx-dev-runtime" from "/Users/me/project/react.tsx"

Additional information

tsconfig.json

{
  "compilerOptions": {
    "lib": ["ESNext"],
    "module": "esnext",
    "target": "esnext",
    "moduleResolution": "bundler",
    "moduleDetection": "force",
    "allowImportingTsExtensions": true,
    "noEmit": true,
    "composite": true,
    "strict": true,
    "downlevelIteration": true,
    "skipLibCheck": true,
    "jsx": "preserve",
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "allowJs": true,
    "types": [
      "bun-types" // add Bun global
    ]
  }
}

package.json

{
  "name": "patterns",
  "module": "main.ts",
  "type": "module",
  "devDependencies": {
    "bun-types": "^1.0.1"
  },
  "peerDependencies": {
    "typescript": "^5.0.0"
  }
}

danharten-sovtech commented 1 year ago

Facing this problem, too

pinkboid commented 1 year ago

Facing this problem, too

It looks like it can be fixed with bun add react. The docs probably should mention that as a required dependency, but makes sense.

danharten-sovtech commented 1 year ago

Thanks @pinkboid - it looks like I still get the same error messaging though on my JSX.

Doesn't seem very "out of the box" yet :')

pinkboid commented 1 year ago

Thanks @pinkboid - it looks like I still get the same error messaging though on my JSX.

Ah looks like bun add @types/react is also required. Adding both just fixed mine.

Doesn't seem very "out of the box" yet :')

These were my thoughts too.

danharten-sovtech commented 1 year ago

This worked 🥳 I did also need to update my tsconfig to "jsx": "react-jsx"

danharten-sovtech commented 1 year ago

Have you been able to render your JSX on the DOM, @pinkboid ? on a localhost server

pinkboid commented 1 year ago

Have you been able to render your JSX on the DOM, @pinkboid ? on a localhost server

Working on it. Trying to implement the basic example

import * as ReactDOM from 'react-dom/client'
import { Component } from "./Component.tsx"

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component message="Sup!" />)

but am getting the error in vscode

Cannot find name 'document'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.ts(2584)
any

despite my tsconfig already having

{
  "compilerOptions": {
    "lib": ["ESNext", "dom"],

not sure...

danharten-sovtech commented 1 year ago

This is exactly where I'm at now. Have hit a brick wall. Will revert back here if I am successful!

I looked at react-ts-template-for-bun but it omits Bun types from the config

https://github.com/itsanji/react-ts-template-for-bun/blob/master/tsconfig.json

Edit* Yup, doesn't use Bun.serve()

pinkboid commented 1 year ago

This is exactly where I'm at now. Have hit a brick wall. Will revert back here if I am successful!

I looked at react-ts-template-for-bun but it omits Bun types from the config

https://github.com/itsanji/react-ts-template-for-bun/blob/master/tsconfig.json

Edit* Yup, doesn't use Bun.serve()

So it looks like we are supposed to bundle the index.tsx into a out/ directory using bun build index.ts --outdir out/, manually create a index.html inside of out/ with the <script> tag linking to ./index.js, and then run bunx serve out/. This should get a web server spinning with the react component rendered to the DOM, but it doesn't fix the IDE alert about cannot find name document ..

Also, it just actually doesn't work when I spin up the web server. I'm getting

Loading module from “http://localhost:3000/index.js” was blocked because of a disallowed MIME type (“text/html”).

in the console.log

Maybe I missed a step, will go back and read again. Definitely not feeling like "it just works"... haha

danharten-sovtech commented 1 year ago

After some digging on bun discord, I came across this thread from this morning:

"Vite it the best option for this. Frontend hot reloading requires a full dev server that stitches together the bundler, module loader, HTTP/WebSocket server, etc. Bun provides the component parts but doesn't try to be a dev server that works out of the box (yet) With React in particular, hot reloading requires a package called react-fast-refresh getting injected during bundling which isn't something Bun does currently. We're working on a "Framework API" (currently marked as "Coming Soon" in the sidebar of the documentation) that will make something like this possible with just Bun"

From Colin in DevRel @ bun

Sounds like, until these bits are stitched together, we may still need to use Vite.

danharten-sovtech commented 1 year ago

To access document, you currently need to add:

/// <reference lib="dom" />
/// <reference lib="dom.iterable" />

To the typescript file itself. See here: https://bun.sh/docs/runtime/typescript

danharten-sovtech commented 1 year ago

This didn't seem to help me get a Hello World rendering though!

FDiskas commented 1 month ago

bun add react react-dom
bun add -D @types/react @types/react-dom

But I still getting message

<NoName message="Hello world!" />

instead of compiled

oven-sh / bun