Bun.build always assume "react-jsxdev" even when set "react-jsx"

[rizrmd]

What version of Bun is running?

0.7.0

What platform is your computer?

Darwin 22.5.0 arm64 arm

What steps can reproduce the bug?

run:

  await Bun.build({
    entrypoints: ["./index.tsx"],
    outdir: "./build",
    define: { "process.env.NODE_ENV": '"production"' },
  });

make sure to set {jsx: "react-jsx" }in your tsconfig

What is the expected behavior?

You will see the output always use:
jsx_dev_runtime.jsxDEV("div", {

What do you see instead?

instead of jsx_runtime.jsx("div", {

Additional information

Why bun always use "react-jsxdev" instead of following tsconfig ?

[mnpenner]

This seems to affect bun ./somefile.tsx too (i.e. running it directly)

[Ricki-BumbleDev]

Same here. I use a custom JSX implementation (@nanoweb/jsx) that doesn't come with a dev runtime, in which case the issue becomes particularly obvious. Only way to make it work currently is to always set BUN_ENV=production or NODE_ENV=production.

[Enalmada]

Unfortunately I couldn't even get it to work by setting NODE_ENV to production. Just before giving up completely on bundling react libraries with Bun, I happened to find that changing external from ['*'] to a manual list of packages in my dependencies works. I hope this helps someone with a workaround and possibly helps narrow down the bug.

  import getExternalDependenciesFromPackageJson from '@enalmada/bun-externals'
  const externalDeps = await getExternalDependenciesFromPackageJson();

  await Bun.build({
    entrypoints: ['./src/client/urql/UrqlWrapper.tsx'],
    outdir: './dist/client',
    target: 'node',
    external: [...externalDeps, './src/client/urql/UrqlWrapper'],
    root: './src/client',
  });

[tonai]

NODE_ENV should be equal to production when building. It should be the default. We should not have to add NODE_ENV=production when running bun build.

[jordanbtucker]

Just ran into this myself. Looks like it was an intentional design decision.

I'm not really sure what's meant by:

We treat "react-jsx" and "react-jsxDEV" identically because it is too easy to auto-import the wrong one.

Seems like we should, at the very least, fix the documentation. But I would prefer if Bun did what its documentation currently says and use jsx when the setting is react-jsx.

[Duc-Developer]

Until current version 1.1.16, it seems this error still exists. There is no difference when choosing "react-jsx" vs "react-jsxdev" in my tsconfig.json, they are always compiled as

import {
jsxDEV
} from "react/jsx-dev-runtime";

When I built a package module for react, using jsxDev resulted in an error on the production. I have a quick solution to this problem. I don't think it's perfect but it is solving my problem. I hope this issue is resolved soon. If anyone has a better solution please let me know. Thanks a lot!

const fs = require('fs').promises;
const build = async () => {
   await Bun.build({
        entrypoints: ['src/index.tsx'],
        outdir: './dist',   // main file: './dist/index.js'
        format: 'esm',
        splitting: false,
        loader: { '.jsx': 'jsx' },
        external: ['react', 'react-dom'],
        sourcemap: 'external',
   });

   const bundleContent = await fs.readFile( './dist/index.js', 'utf8');
    const fixedContent = bundleContent
        .replace(/react\/jsx-dev-runtime/g, 'react/jsx-runtime')
        .replace(/jsxDEV/g, 'jsx');
    await fs.writeFile(bundlePath, fixedContent);
};
build();

[PunchlY]

Although the comment is a bit outdated, I found that using "jsx": "react" can avoid strange errors. But the prerequisite is to import it global:

// main.ts
import React from 'hono/jsx';
// The same problem will occur with hono/jsx module
globalThis.React = React;

{
  "compilerOptions": {
    "jsx": "react"
  }
}

[jordanbtucker]

@PunchlY I'm not sure what errors you're referring to, but this doesn't seem to have anything to do with this issue.

[PunchlY]

@jordanbtucker Sorry, I didn't figure it out at the beginning that this was not a bun problem, but a hono/jsx problem. I should have raised it under hono/jsx.