[plugin:vite:esbuild] Transform failed with 1 error: Unexpected "@"，when using styled-components+mobx+ts

Describe the bug

When I’m rendering a styled component, I get the following error: [plugin:vite:esbuild] Transform failed with 1 error: Unexpected “@”.

Reproduction

See vite-bug-with-styled-components

When I created a new TSX component that used the Styled component in this component, and used the mobx@observer component, I got an error: [Plugin :vite:esbuild] Transform failed with 1 error: Unexpected “@”. When I remove the styled components in the component, it runs normally

System Info

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

System:
    OS: macOS 11.2.3
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 56.30 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.20.0 - /usr/local/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 89.0.4389.90
    Edge: 84.0.522.63
    Firefox: 72.0.2
    Safari: 14.0.3
  npmPackages:
    vite: 2.1.0 => 2.1.0 

Used package manager: npm

[thecodejack]

Have created same in https://github.com/vitejs/vite/discussions/3215

[patak-dev]

Let’s not discuss on old closed issues. You can start a GitHub Discussion or join the chat at Vite Land to ask questions. Thanks!