Skip to content

[V3] React plugin generates warnings for arrow function components when using jsxRuntime: "classic" #8947

Description

@davidwallacejackson

Describe the bug

I'm defining a React component as an arrow function, e.g. const App = () => {...}.

This produces no warning in v2. In v3 beta 6, every arrow function component generates a warning along the lines of:

[vite] warning: Top-level "this" will be replaced with undefined since this file is an ECMAScript module
12 |  
13 |    const [count, setCount] = useState(0);
14 |    return <div className="App" __self={this} __source={{
   |                                        ^
15 |      fileName: _jsxFileName,
16 |      lineNumber: 10,

Reproduction

https://stackblitz.com/edit/vitejs-vite-xncvpl?file=src%2FApp.tsx,package.json,vite.config.ts,src%2Fmain.tsx,README.md&terminal=dev

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /bin/yarn
    npm: 7.17.0 - /bin/npm
  npmPackages:
    @vitejs/plugin-react: ^1.3.2 => 1.3.2 
    vite: 3.0.0-beta.6 => 3.0.0-beta.6

Used Package Manager

npm

Logs

No response

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    duplicateThis issue or pull request already exists

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions