[vite] warning: Top-level "this" will be replaced with undefined since this file is an ECMAScript module

[nareshbhatia]

Describe the bug

Running a React app with Vite has started producing the above error since version change of esmbuild from v0.14.44 to v0.14.45. This error occurs wherever the React app is using an arrow function. My reproduction below has created a fresh Vite app and only changed the App component from a function to a function expression using an arrow function and this error starts appearing.

[vite] hmr update /src/App.tsx
[vite] warning: Top-level "this" will be replaced with undefined since this file is an ECMAScript module
23 |          lineNumber: 11,
24 |          columnNumber: 9
25 |        }, this), /*#__PURE__*/_jsxDEV("p", {
   |           ^
26 |          children: "Hello Vite + React!"
27 |        }, void 0, false, {

  Plugin: vite:esbuild
  File: /Users/naresh/projects/vite-esmbuild-issue/src/App.tsx

The issue has been discussed in the esmbuild repository here and closed: evanw/esbuild#2328. They need to know exactly what flags vite is using to invoke esmbuild.

Reproduction

https://github.com/nareshbhatia/vite-esmbuild-issue

System Info

System:
    OS: macOS 12.3.1
    CPU: (4) x64 Intel(R) Core(TM) i5-7600K CPU @ 3.80GHz
    Memory: 103.36 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 1.22.15 - ~/.yarn/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
    Watchman: 2022.03.21.00 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 96.1.32.115
    Chrome: 102.0.5005.115
    Safari: 15.4
  npmPackages:
    @vitejs/plugin-react: ^1.3.0 => 1.3.2
    vite: ^2.9.9 => 2.9.12

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

This is happening because plugin-react uses @babel/plugin-transform-react-jsx to transform JSX.

For a workaround, you could set esbuild.logOverride to omit the warning.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  esbuild: {
    logOverride: { 'this-is-undefined-in-esm': 'silent' }
  }
})

[LemmyMwaura]

Yup, That worked 👍 @sapphi-red

[LemmyMwaura]

So... The solution above still doesn't work. Choosing to ignore it at the moment.

More Context: When the app rebuilds and an error is encountered, the warnings re-appear.

[Maxhaufe17]

Thanks

[ayushpaharia]

Worked for me. Thanks!

[YasirHasn9]

My coworker comes up with this work around and it works. He adds this workaround and put them along side the rest of the configuration.

export default defineConfig({
  plugins: [
    process.env.MODE !== 'production'
      ? react({
          jsxRuntime: 'classic',
        })
      : react(),
    WindiCSS(),
  ],

  ... other properties
});