Recharts Build Broken for 2.3.3

Describe the bug

I get this weird error (see Logs) when using/previewing the build. This happens when I build with version 2.3.3 of Vite. This didn’t happen with version 2.3.0.

Reproduction

This is a simple example. It has recharts and Vite 2.3.0: https://codesandbox.io/s/vite-recharts-ri5qh?file=/package.json This should already have the dist folder. If it doesn’t, you can run npm run build in the terminal. Then run npm run serve. The charts should still be able to load.

Same example but with Vite 2.3.3: https://codesandbox.io/s/vite-recharts-233-cvz26?file=/package.json Again, build if there isnt a dist folder. Run npm run serve, will crash and not show the chart.

System Info

System:
    OS: Linux 5.4 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 2.33 GB / 62.73 GB
    Container: Yes
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.16.1/bin/yarn
    npm: 6.14.12 - ~/.nvm/versions/node/v14.16.1/bin/npm
  npmPackages:
    vite: 2.3.3 => 2.3.3

Used package manager: npm

Logs

.

vite:config bundled config file loaded in 33ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'react-refresh',
  vite:config     'vite:dynamic-import-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   server: { open: undefined, fsServe: { root: '/sandbox', strict: false } },
  vite:config   configFile: '/sandbox/vite.config.ts',
  vite:config   configFileDependencies: [ 'vite.config.ts' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     server: { open: undefined, fsServe: [Object] }
  vite:config   },
  vite:config   root: '/sandbox',
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object] ] },
  vite:config   publicDir: '/sandbox/public',
  vite:config   cacheDir: '/sandbox/node_modules/.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   isProduction: false,
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillDynamicImport: false,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: { esbuildOptions: { keepNames: undefined } }
  vite:config } +3m

---

[drobannx]

For the time being, I wrote a quick plugin to get us past this issue for our production builds. This plugin is definitely quick and dirty but should be targeted enough to only effect the problem module but felt like I should share it for anyone else having this issue currently.

function rechartsPlugin() {
  return {
    name: 'recharts_plugin',
    transform(code: string, id: string) {
      if (id.includes('reduce-css-calc/dist/parser.js')) {
        return code.replace(`typeof require !== 'undefined'`, 'true');
      }

      return null;
    },
  };
}

[fadi-george]

Yeah seems to be fixed when switching to v2.4.3. Serve also is fine. And without needing any plugins.