search

markusenglund / react-switch

A draggable toggle-switch component for React. Check out the demo at:
https://react-switch.netlify.com/
MIT License
1.33k stars 101 forks source link

Switch causing "Element type is invalid" in Vite production build #100

Closed wKovacs64 closed 2 years ago

wKovacs64 commented 2 years ago

The Switch component causes a React error in the production build of a Vite project. It does not error in development mode. When you build and view a production build, you get a link to the following React error:

https://reactjs.org/docs/error-decoder.html/?invariant=130&args[]=object&args[]=

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

OS: Windows 10, but probably all Browser: Chrome, Firefox, Edge Reproduction: https://stackblitz.com/edit/vitejs-vite-zsmuma?file=src/App.tsx

Reproduction steps:

  1. Use the Switch component in a Vite project
  2. Build the project (npm run build)
  3. Preview/serve the project (npm run preview, browser to http://localhost:5000)

I'm not sure if this is an issue with this project or with Vite, but thought I would start here as I've used Vite a bunch and never ran into this error before attempting to use this Switch component. Thank you for your work!

markusenglund commented 2 years ago

Thanks for the report. The stackblitz demo gets stuck saying "Booting WebContainer", maybe they're having server issues...? I will try to reproduce on my local machine.

markusenglund commented 2 years ago

I was able to reproduce the issue just as you described. Will investigate the cause.

markusenglund commented 2 years ago

I found some discussion about the exact same issue in the vite repo including a hacky workaround.

It's probably time for this package to transition from commonjs to ESM to avoid this problem.

keyur555 commented 2 years ago

Glad I found this issue! I am experiencing the same and took me a while to find out 👍

wKovacs64 commented 2 years ago

I found some discussion about the exact same issue in the vite repo including a hacky workaround.

It's probably time for this package to transition from commonjs to ESM to avoid this problem.

Good find, not sure how I missed that. Nasty, but I'll probably use that for the time being. 😅 Thanks for looking into it.

markusenglund commented 2 years ago

Quite ugly indeed, will fix in the next version.

eden-lane commented 2 years ago

I have the same problem, but I don't know which component causes it :( Everything is minified

markusenglund commented 2 years ago

ESM support was shipped in 7.0.0. I checked that it works with Vite when using the normal import syntax and it does.

markusenglund commented 2 years ago

ESM support was shipped in 7.0.0. I checked that it works with Vite when using the normal import syntax and it does.