ReferenceError: Can't find variable: document (@remix-run)

[AlfredOdling]

What version of Bun is running?

1.0.0+822a00c4d508b54f650933a73ca5f4a3af9a7983

What platform is your computer?

Darwin 22.6.0 x86_64 i386

What steps can reproduce the bug?

Running bun run index.tsx in a React/TS app.

What is the expected behavior?

It should start the app

What do you see instead?

yarn run v1.22.19 $ bun run ./src/index.tsx [0.16ms] ".env" 409 | function getUrlBasedHistory(getLocation, createHref, validateLocation, options) { 410 | if (options === void 0) { 411 | options = {}; 412 | } 413 | let { 414 | window = document.defaultView, ^ ReferenceError: Can't find variable: document at getUrlBasedHistory (/Users/alfredodling/code/marketplaceApp/node_modules/@remix-run/router/dist/router.cjs.js:414:13) at createBrowserHistory (/Users/alfredodling/code/marketplaceApp/node_modules/@remix-run/router/dist/router.cjs.js:237:9) at createBrowserRouter (/Users/alfredodling/code/marketplaceApp/node_modules/react-router-dom/dist/umd/react-router-dom.development.js:253:15) at /Users/alfredodling/code/marketplaceApp/src/routes/index.tsx:7:22

Additional information

No response

[krystofbe]

I'm experiencing the same error when importing bootstrap

ReferenceError: Can't find variable: document
      at Jq (/Users/krystof/git/django/app-backend/node_modules/bootstrap/dist/js/bootstrap.js:1622:44)

[lukes00]

Same issue with a brand new react-app.

╰─ bun run src/index.js
2 | import ReactDOM from 'react-dom/client';
3 | import './index.css';
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 |
7 | const root = ReactDOM.createRoot(document.getElementById('root'));
                                    ^
ReferenceError: Can't find variable: document
      at /Users/lsucklin/code/lsucklin/bun/bun-test/src/index.js:7:33

[serge-st]

Same if I try to create a new React TypeScript app.

I tried to add DOM to lib in TypeScript config, but the error won't go away

import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

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

// tsconfig.json
{
  "compilerOptions": {
    "lib": ["ES2017", "DOM"],
    // ...
}

[krystofbe]

This is clearly a bug or configuration issue with bun. When I use esbuild I can compile my file.

[AlfredOdling]

That's a shame, was excited to try bun. Will wait until this is solved. Totally get it though, it's only v1.

[krystofbe]

Just wanted to share a solution that worked for me:

To successfully run the command, use:

bun build --minify static/js/entrypoints/base.ts

Instead of:

bun --minify static/js/entrypoints/base.ts

Please note, omitting the build keyword makes bun operate in node mode. In this mode, document and window are not available.

Hope this helps!

[whitte-h]

Just wanted to share a solution that worked for me:

To successfully run the command, use:

bun build --minify static/js/entrypoints/base.ts

Instead of:

bun --minify static/js/entrypoints/base.ts

Please note, omitting the build keyword makes bun operate in node mode. In this mode, document and window are not available.

Hope this helps!

Thanks, after that what do you use to run it? bun run ./build/index.js?

I'm testing to run a react project, but if it does run the TSX directly does not find window or localStorage, and if I build it and run the index.js, It does not find/work some of MyComponent extends React.Component

any ideas anyone?

[Anubarak]

Same issue here including DOM in the tsconfig did not fix it. Has someone found a better solution to run a script?

[bentrynning]

Could be that I missunderstand what your trying to do. But from the looks of it it seams that your trying to run your client code with the bun runtime as a server application.

bun run or just bun will start your application as a bun or node runtime application. If your .ts file includes client code like document, window etc this is code that only runs in the browser and should just be compiled / transpiled with bun build --output ./public etc.

Then you can have a another part of the code a server.ts etc that runs hono / express or whatever framework that will run your webserver and serve the compiled client.ts file from public folder.

Or I would just scaffold the react application with vite, next, remix or something and just use bun as a package manager and script runner.