Exported variable in chunk is not defined

Describe the bug

Some interaction between the packages @material-ui/core@4.11.0, @material-ui/icons@4.9.1 and @material-ui/pickers@4.0.0-alpha.12 leads to a chunk being generated which exports a variable that is not defined. In the browser’s console:

Uncaught ReferenceError: makeStyles_default is not defined
    at Object.makeStyles (index.js:1)
    at Object.get [as makeStyles] (chunk.5ZFU4BUR.js?v=c903acc3:25)
    at main.js:3

This problem only seems to occur in specific circumstances. Depending on what the application imports Vite appears to generate different chunks. In some cases the chunk generated contains the error described above, in other cases it does not. I describe those cases in the reproduction.

Reproduction

https://gist.github.com/183adfb90326072f2f99522d01635497

git clone [e-mail]:183adfb90326072f2f99522d01635497.git vite-bug-1853
cd vite-bug-1853/
npm i && npm run dev

Open the Vite dev server and observe the following error in the browser console:

Uncaught ReferenceError: makeStyles_default is not defined
    at Object.makeStyles (index.js:1)
    at Object.get [as makeStyles] (chunk.5ZFU4BUR.js?v=c903acc3:25)
    at main.js:3

Now, stop the dev server. Edit main.js like so:

- import Delete from "@material-ui/icons/Delete"
+ import { Delete } from "@material-ui/icons"

then run rm -r node_modules/.vite && npm run dev and open the server again. You should not observe any error and instead see “Hello, world” on the page.

I investigated the behaviour and it would appear that Vite builds chunks with a radically different content for @material-ui/core in the two scenarios I just outlined. I am not sure what triggers this change in behaviour (evidently something to do with the deep import of the icon). In any case, the chunk generated in one of the scenarios is broken. I don’t know if this is due to a problem in Material UI itself or a problem with Vite; I haven’t gotten deep enough in my investigation to judge.

You can get this from the reproduction but you can clearly see in this Gist what’s going on: https://gist.github.com/hmaurer/c0e17b79532dc0cc584831b2f5d641e3. The @material-ui_core.good.js file contains both an import for makeStyles_default and an export makeStyles_default as makeStyles, whereas the @material-ui_core.buggy.js file contains an export makeStyles: () => makeStyles_default but no import or definition for makeStyles_default!

System Info

• vite version: 2.0.0-beta.62
• Operating System: MacOS Catalina
• Node version: v14.9.0
• Package manager (npm/yarn/pnpm) and version: NPM v6.14.8

[abdusco]

Following config works for me:

import { defineConfig } from "vite";
import reactRefresh from "@vitejs/plugin-react-refresh";

export default defineConfig({
  plugins: [reactRefresh()],
  resolve: {
    alias: [
      {
        find: /^@material-ui\/icons\/(.*)/,
        replacement: "@material-ui/icons/esm/$1",
      },
      {
        find: /^@material-ui\/core\/(.+)/,
        replacement: "@material-ui/core/es/$1",
      },
      {
        find: /^@material-ui\/core$/,
        replacement: "@material-ui/core/es",
      },
    ],
  },
  define: {
    global: "window", // fix for packages that support both node and browser
  },
});

[yyx990803]

This looks like a legit bug in esbuild - probably related to https://github.com/evanw/esbuild/issues/706, but this one actually generates a reference to an undefined variable.