vite:esbuild gives warning for react fat arrow function components

[smeng9]

After bumping the version from 0.14.44 to 0.14.45, projects created using vite react template with fat arrow functional components throws a lot of warnings about

Top-level "this" will be replaced with undefined since this file is an ECMAScript module

I have made an example using codesandbox to illustrate the warning. https://codesandbox.io/s/silly-violet-b21kmm?file=/src/Test2.jsx
You can compare the difference between Test1, Test2, and Test3. In case the warning does not showup, you can click the fork button to relaunch the server.

The expected behavior should not have a warning for <Test2 /> component.

[evanw]

Sorry, but I have no idea how to reproduce this given your link. I'm not sure where to look to find the warning, and pressing the fork button doesn't seem to work without setting up an account. The terminal also doesn't work and I don't see a way to extract your code from that website. Can you provide a self-contained example that demonstrates the problem? The easiest thing would to just provide a single file that can be given to esbuild along with the esbuild command-line arguments, without involving Vite at all.

[scott-lc]

I don't think this is an issue with esbuild itself. The error message in question is nothing new to esbuild. That warning was added in May 2021 in version 0.11.17.

I was able to "fix" the problem (or at least make it go away, YMMV) by adding the following to my vite.config.js file:

    esbuild: {
      define: {
        this: 'window'
      }
    }

This solution is explained in the version 0.12.9 release notes

[mikemerritt]

@scott-lc That solution doesn't work for me. I get a ERROR: Invalid option in transform() call: "this"

[jakeboone02]

@evanw Is there an easy way to find out exactly what flags vite uses when it calls esbuild? I'd be happy to create a minimal reproduction, but I'm not sure how to (easily) do it outside the context of vite.

[nareshbhatia]

I am creating a reproduction in vite. Give me a few minutes.

[evanw]

The link just randomly started working for me. Here's what I see now:

9:53:13 PM [vite] warning: Top-level "this" will be replaced with undefined since this file is an ECMAScript module
9  |      lineNumber: 2,
10 |      columnNumber: 10
11 |    }, this);
   |       ^
12 |  };
13 |

  Plugin: vite:esbuild
  File: /sandbox/src/Test2.jsx

I assume there's some post-processing that Vite is doing to the source code before esbuild sees it. Maybe it's running Babel's JSX transform? I can't get Vite to do this locally, but I also have no idea how to use Vite.

In any case, you should be able to disable this warning with logOverride: { 'this-is-undefined-in-esm': 'silent' }. Documentation is here: https://esbuild.github.io/api/#log-override. Hopefully Vite lets you pass options to esbuild.

[smeng9]

I believe the issue is related to vite itself. The source that is passed to esbuild already has this in it, so the warning is caught by esbuild.

Thanks for looking into it. Closing this for now. The link to discussion on vite is here

[nareshbhatia]

Bug opened in vite repo: vitejs/vite#8644

Reproduction is here: https://github.com/nareshbhatia/vite-esmbuild-issue

[evanw]

I still don't have a way to reproduce this using Vite, but I'm assuming the issue is with Babel then esbuild. I'm going to try to detect when this happens and omit the warning in that case for the next release of esbuild.

[nareshbhatia]

I still don't have a way to reproduce this using Vite, but I'm assuming the issue is with Babel then esbuild. I'm going to try to detect when this happens and omit the warning in that case for the next release of esbuild.

Please try my repo mentioned above: https://github.com/nareshbhatia/vite-esmbuild-issue. Easy to reproduce in two steps:

npm ci
npm run dev

[evanw]

Thanks. I can reproduce it now, and I can confirm my fix above will avoid the warning.

[sapphi-red]

Thanks for the quick fix.
Yes, vite-plugin-react uses @babel/plugin-transform-react-jsx to transform JSX and it is injecting this.

Also it happens with @babel/plugin-transform-react-jsx-self, which is used with classic JSX runtime.

[sapphi-red]

This is the code that imitates how plugin-react transforms classic JSX runtime. (I've omitted react-refresh/babel.)
https://stackblitz.com/edit/node-i2w3po?file=run.js

[smeng9]

The issue is related to not including @babel/preset-env

@sapphi-red I have modified your example https://stackblitz.com/edit/node-f81xay?file=run.js,package.json,input.jsx and if you toggle the line in 10 and 11 it will show the warning

[sapphi-red]

@smeng9 Your example is converting ESM to CJS with babel. So this is converted to void 0 by babel.

I think both esbuild and @babel/plugin-transform-react-jsx-self is doing nothing wrong here.
Using top-level this is not intended for most of the time so outputting an warning makes sense.
But @babel/plugin-transform-react-jsx-self is using this after understanding that it could be undefined.

One way to solve this is to disable this warning automatically by plugin-react.