Missing exports within build

[Kyzegs]

Describe the bug

I'm running into an odd issue with a 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.

Reproduction

SOON

System Info

System:
  OS: Windows 10 10.0.19044
  CPU: (24) x64 AMD Ryzen 9 3900XT 12-Core Processor
  Memory: 12.90 GB / 31.95 GB
Binaries:
  Node: 16.15.0 - D:\Program Files\nodejs\node.EXE
  Yarn: 1.22.18 - ~\AppData\Roaming\npm\yarn.CMD
  npm: 8.5.5 - D:\Program Files\nodejs\npm.CMD
Browsers:
  Edge: Spartan (44.19041.1266.0)
  Internet Explorer: 11.0.19041.1566
npmPackages:
  @vitejs/plugin-react: ^1.3.2 => 1.3.2
  vite: ^2.9.12 => 2.9.12

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[lmiller1990]

I am seeing something similar too - exports is not defined. Same code base builds fine on mac/linux.

[github-actions]

Hello @Kyzegs. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

[sapphi-red]

It seems you are using 2.9.12. Please try 3.0.0-beta.3 too. It includes many fixes around CJS.

[Kyzegs]

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