Unexpected source data in compiled JSX

[williamsantc]

Hey, I'm having some issues when compiling my app, it's being added the source info and jsx-runtime function is jsxDEV() instead of jsx().

Ye.jsxDEV(Ys, { size: 80 }, void 0, !1, {
      fileName: "/path-to-project/src/components/Loading/index.tsx",
      lineNumber: 17,
      columnNumber: 9
    }, globalThis)

This project was using react-scripts before, I also tried switching to classic runtime but same result, compiler is adding __source property. In another project that I started from scratch I don't have this issue.

[ArnaudBarre]

Is this happening with the build output? That's totally expected in dev

[williamsantc]

Yes, it happens running vite build --mode whatever I tried with qa, production, etc envs but same result.

[williamsantc]

vite.config.ts

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react-swc";
import viteLegacyPlugin from "@vitejs/plugin-legacy";
import { createHtmlPlugin } from "vite-plugin-html";
import tsconfigPaths from 'vite-tsconfig-paths';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, process.cwd(), '');
    return {
        define: {
            '__APP_VERSION__': JSON.stringify(process.env.npm_package_version),
        },
        build: {
          outDir: "dist/" + mode,
        },
        plugins: [
            react(),
            viteLegacyPlugin({
                targets: ['defaults', 'not IE 11']
            }),
            createHtmlPlugin({
                minify: true,
                template: 'index.html',
            }),
            tsconfigPaths(),
            VitePWA({ ... }),
        ],
          envPrefix: 'HEALTHAPP_'
    };
})

[ArnaudBarre]

This plugin is using different plugins for vite build and vite dev, and the on for build uses the default esbuild build configurations. If you're using build but with node_env set to development you will get a development build this is expected

[williamsantc]

You're right. Setting manually NODE_ENV compiled correctly:

NODE_ENV=production vite build --mode whatever

Ye.jsx(Ys, { size: 80 }), Ye.jsx(vs, {
      style: {
        fontWeight: 700,
        marginTop: "10px"
      },
      children: "Loading..."
    })

Is it ok setting NODE_ENV manually? In my other app I just run vite build --mode whatever

[ArnaudBarre]

This is a behaviour that most tools keeps because some people want to be able to run react dev version with a built app to debug minified errors. By default build doesn't do that, so probably something is not correct in your .env files