Building with Vite

[Kyzegs]

I'm running into an odd issue with the dependency when building with Vite.

Here's a simple component using react-responsive:

import React from 'react';
import { useMediaQuery } from 'react-responsive';

const Component = () => {
  const isMobile = useMediaQuery({ query: '(max-width: 991px)' });

  if (isMobile) {
    return <span>Mobile view</span>;
  }

  return <span>PC View</span>;
};

export default Component;

After building with Vite (vite build) and visiting my website, it'll return me an error:

TypeError: reactResponsive.exports.useMediaQuery is not a function

I've tried numerous things to fix this issue. One odd fix is by simply logging the imported function.

import React from 'react';
import { useMediaQuery } from 'react-responsive';

+ console.log(useMediaQuery);

const Component = () => {
  const isMobile = useMediaQuery({ query: '(max-width: 991px)' });

  if (isMobile) {
    return <span>Mobile view</span>;
  }

  return <span>PC View</span>;
};

export default Component;

I've also run Vite in development mode (vite), and this issue did not arise within that environment.

[yocontra]

@Kyzegs Are you using the latest 9.0.0 beta or the 8.x version?

[Kyzegs]

I'm using the latest 9.0.0 beta.

[Kyzegs]

Using Vite 3.0.0-beta.4 solved the issue for me.