bun run file.tsx throws error `Cannot find module`

vithalreddy commented 1 year ago

What version of Bun is running?

0.4.0

What platform is your computer?

Linux 5.15.79.1-microsoft-standard-WSL2 x86_64 x86_64

What steps can reproduce the bug?

I'm trying to run react ssr example without bun install.

jsx.tsx

import { renderToReadableStream } from "react-dom/server";

const dt = new Intl.DateTimeFormat();

export default {
  port: 3000,
  async fetch(request: Request) {
    return new Response(
      await renderToReadableStream(
        <html>
          <head>
            <title>Hello World</title>
          </head>
          <body>
            <h1>Hello from React!</h1>
            <p>The date is {dt.format(new Date())}</p>
          </body>
        </html>,
      ),
    );
  },
};

bun run jsx.tsx

╰─ bun run jsx.tsx

error: Cannot find module "react/jsx-dev-runtime" from "/home/v/Projects/bun/jsx.tsx"

am i missing something here?

What is the expected behavior?

should run without any error.

What do you see instead?

error: Cannot find module "react/jsx-dev-runtime" from "/home/v/Projects/bun/jsx.tsx"

Additional information

No response

Jarred-Sumner commented 1 year ago

This appears to be a CommonJS bug when using the automatic installs and auto-importing react

As a temporary workaround, try doing a side-effect import of react at the top:

import "react";
import { renderToReadableStream } from "react-dom/server";

const dt = new Intl.DateTimeFormat();

export default {
  port: 3000,
  async fetch(request: Request) {
    return new Response(
      await renderToReadableStream(
        <html>
          <head>
            <title>Hello World</title>
          </head>
          <body>
            <h1>Hello from React!</h1>
            <p>The date is {dt.format(new Date())}</p>
          </body>
        </html>
      )
    );
  },
};

vithalreddy commented 1 year ago

Got it. thanks

it's working after adding react import but i had to clear the cache rm -rf ~/.bun/install/cache otherwise it was throwing same error.

hobeas commented 1 year ago

I had the same problem, adding import 'react' didn't fix it. OS version: Darwin x64 19.6.0 Bun version: v1.0.0 Reproduction steps: Initialize the project with bun init, add react.tsx, then run bun react.tsx.

// react.tsx
function Component(props: {message: string}) {
  return (
    <body>
      <h1 style={{color: 'red'}}>{props.message}</h1>
    </body>
  )
}
console.log(<Component message="Hello world!" />)

Result: Throw error

error: Cannot find module "react/jsx-dev-runtime" from "/Users/h/test/hi-bun/react.tsx"

Adnanear commented 1 year ago

After reading the docs from bun's JSX section, they have mentioned something reall important!

// JSX is not transpiled
// "preserve" is not supported by Bun currently
<Box width={5}>Hello</Box>

I have managed to fix the issue by doing these two steps:

bun add react
replace "compilerOptions.jsx" to anything other than "preserve" I suggest using react-jsx. (This step will also fix the JSX type error)

and then you can just bun run <script.tsx>

hobeas commented 1 year ago

@Adnanear thx. It can be resolved by installing react. Unchanged compilerOptions.jsx, kept as preserve.

Electroid commented 11 months ago

This appears to have been fixed as of Bun v1.0.7.

❯ curl http://localhost:3000/ -v
*   Trying 127.0.0.1:3000...
* Connected to localhost (127.0.0.1) port 3000 (#0)
> GET / HTTP/1.1
> Host: localhost:3000
> User-Agent: curl/7.85.0
> Accept: */*
> 
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Date: Tue, 24 Oct 2023 22:11:50 GMT
< Content-Length: 143
< 
* Connection #0 to host localhost left intact
<!DOCTYPE html><html><head><title>Hello World</title></head><body><h1>Hello from React!</h1><p>The date is <!-- -->10/24/2023</p></body></html>⏎

If you are still running into this bug, please feel free to re-open this issue.

sahibalejandro commented 11 months ago

This issue happens to me, I'm using bun 1.0.11.

Even a fresh bun project with a simple index.tsx file containing just this fails:

function foo() {
  return <div>hello</div>
}

Does anyone else still facing this issue?

Jarred-Sumner commented 11 months ago

function foo() {
  return <div>hello</div>
}

Using JSX requires react. React is not installed. You can add react to package.json and it should work (or run bun add react)

sahibalejandro commented 11 months ago

Go it, working now after running bun add react.

It is confusing the docs says

Bun supports .jsx and .tsx files out of the box. Bun's internal transpiler converts JSX syntax into vanilla JavaScript before execution.

Will be nice to clarify that React needs to be installed, I can create a PR to address that if you like 👍🏼

mkastner commented 9 months ago

What a pity! I'll go back using handlebars. The file based router is really nice though.

angelhdzmultimedia commented 5 months ago

Help! 🥹

{
  "compilerOptions": {
    // Enable latest features
    "lib": ["ESNext", "DOM"],
    "target": "ESNext",
    "module": "ESNext",
    "moduleDetection": "force",
    "jsx": "preserve",
    "allowJs": true,

    // Bundler mode
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "noEmit": true,

    // Best practices
    "strict": true,
    "skipLibCheck": true,
    "noFallthroughCasesInSwitch": true,

    // Some stricter flags (disabled by default)
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noPropertyAccessFromIndexSignature": false
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"]
}

{
  "name": "bun-express-effect-ts",
  "module": "index.ts",
  "type": "module",
  "devDependencies": {
    "@types/bun": "latest"
  },
  "peerDependencies": {
    "typescript": "^5.0.0"
  },
  "scripts": {
    "dev": "bun --hot run src/main.tsx"
  },
  "dependencies": {
    "@types/express": "^4.17.21",
    "@types/xml2js": "^0.4.14",
    "effect": "^3.0.4",
    "express": "^4.19.2",
    "react": "^18.2.0",
    "xml2js": "^0.6.2"
  }
}

oven-sh / bun