bun
bun copied to clipboard
oven-sh
bun run file.tsx throws error `Cannot find module`
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
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>
)
);
},
};
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.
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"
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>
@Adnanear thx. It can be resolved by installing react. Unchanged compilerOptions.jsx, kept as preserve.
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.
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?
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)
Go it, working now after running bun add react.
It is confusing the docs says
Bun supports
.jsxand.tsxfiles 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 👍🏼
What a pity! I'll go back using handlebars. The file based router is really nice though.
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"
}
}
