Skip to content

@vitejs/plugin-react-refresh doesn't work with generic react functional components #2691

@rockwotj

Description

@rockwotj

Describe the bug

Generic typescript react functional components cannot be transformed using plugin-react-refresh.

This works with the typescript compiler.

Reproduction

interface MyProps<T> {
  readonly  example: T;
}
export const MyComponent = <T,>({example}: MyProps<T>) => {
  return null;
}

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: macOS 11.0.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 833.76 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.3.0 - /usr/local/bin/node
    npm: 7.0.14 - /usr/local/bin/npm
  Browsers:
    Chrome: 89.0.4389.90
    Edge: 89.0.774.57
    Firefox: 86.0
    Safari: 14.0.1
  npmPackages:
    vite: ^2.1.3 => 2.1.3 

Used package manager:

Logs

10:22:21 AM [vite] hmr update /src/web/components/common/AutoComplete.tsx (x4)
10:22:21 AM [vite] Internal server error: Transform failed with 1 error:
<redacted> 25:6: error: Expected "}" but found ";"
  Plugin: vite:esbuild
  File: <redacted>
  
  Expected "}" but found ";"
  23 |    example
  24 |  }: MyProps<T>) => {
  25 |    _s();
     |        ^
  26 |  

Before submitting the issue, please make sure you do the following

  • 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.
  • Provide a description in this issue that describes the bug.
  • 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/vue-next instead.
  • Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions