search

vitejs / vite-plugin-react-swc

Speed up your Vite dev server with SWC
MIT License
781 stars 50 forks source link

Why I still see [BABEL] error? #42

Closed timsofteng closed 1 year ago

timsofteng commented 1 year ago

Hello. If I've got correctly this plugin change the babel to swc. But I still have babel error when I run vite as dev server


  VITE v4.0.4  ready in 323 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.33.5:5173/
  ➜  press h to show help
[BABEL] Note: The code generator has deoptimised the styling of /home/my/project/src/assets/404-background.svg as it exceeds the max of 500KB.
ArnaudBarre commented 1 year ago

You are probably using vite-plugin-svgr which uses svgr which uses Babel to transform SVG to React component.

And probably this SVG is too big or somehting. You can try to run sgvo on it (here as a webapp: https://jakearchibald.github.io/svgomg/)

Personally I'm using https://github.com/ArnaudBarre/vite-plugin-fast-react-svg for SVGs but this require very clean SVGs because no transform is applied

timsofteng commented 1 year ago

You are probably using vite-plugin-svgr which uses svgr which uses Babel to transform SVG to React component.

And probably this SVG is too big or somehting. You can try to run sgvo on it (here as a webapp: https://jakearchibald.github.io/svgomg/)

Personally I'm using https://github.com/ArnaudBarre/vite-plugin-fast-react-svg for SVGs but this require very clean SVGs because no transform is applied

You are absolutely right. I use this plugin. Thanks. So the only two possible way are using one those plugins?

ArnaudBarre commented 1 year ago

If you want SVG as React component, you need a plugin. Otherwise you can import it the same way as png/jpg source (but you loose some capabilities from SVG)

There are maybe other plugin that do the same things but nothing convincing for me when I wrote this plugin last year

timsofteng commented 1 year ago

Thank you. I guess this issue is closed.

timsofteng commented 10 months ago

@ArnaudBarre sorry for the late post but could you please describe the method to find another places in my project which use babel? As same as you caught it in svgr. Thanks :)

ArnaudBarre commented 10 months ago

Without an error it's complex. But you can first see why babel is in your project by runining npm why @babel/core of similar