search

yocontra / react-responsive

CSS media queries in react - for responsive design, and more.
https://contra.io/react-responsive
MIT License
6.95k stars 297 forks source link

[Bug] Vite React - Building results in unrecognized function #306

Closed sgnilreutr closed 1 year ago

sgnilreutr commented 1 year ago

Thank you for this awesome library, after recently changing from CRA to Vite for a big project, the build would fail on (see screenshot). After removing the library things started to work again. Do note - that this project is fairly sized, so it can be a result of many different parts together.

Screenshot 2022-11-09 at 11 00 20

Using the following: "react-responsive": "9.0.0", "react": "18.2.0" "typescript": "4.8.4", "vite": "^3.2.3",

lordfpx commented 1 year ago

There is a hack to solve that issue:

Put that code console.log(useMediaQuery) after your imports.

yocontra commented 1 year ago

Have not used vite before - is there anything tracking this on their project since it seems like a common issue? Any guidance for library authors to avoid this?

simonauner commented 1 year ago

I see the same issue with an old webpack 4 build as well, though using pnpm. I can see that the export looks correct from the index.d.ts file though, so unclear what's going on.

miguelski commented 1 year ago

it seems this issue was happending with vite 2 and fixed in vite 3 https://github.com/vitejs/vite/issues/8800

i am using vite 4 and i have the same issue, the workaround that i find out was import MediaQuery, { useMediaQuery } from 'react-responsive'; console.log(MediaQuery, useMediaQuery} it seems otherwise it thinks that useMediaQuery is part of the default export or something like that

yocontra commented 1 year ago

Seems like this is a vite issue and fixed on their end, so closing this.

yocontra commented 1 year ago

If you are on vite, an ESM version has been published as 10.0.0-beta.1 - please test and report any issues. May fix this issue for vite 2/3.