Vite build is prepending undefined variables to some deps in production /dist/index.js file

Describe the bug

Hi, i have several mediapipe dependencies on my react app:

"dependencies": {
    "@mediapipe/camera_utils": "^0.3.1675466862",
    "@mediapipe/control_utils": "^0.6.1675466023",
    "@mediapipe/drawing_utils": "^0.3.1675466124",
    "@mediapipe/hands": "^0.4.1675469240",
    "@mediapipe/pose": "^0.5.1675469404",

Im using this imports in some place on my code:

import { Camera } from '@mediapipe/camera_utils'
import { Hands } from '@mediapipe/hands'
import { Pose } from '@mediapipe/pose'

The problem is, when i run vite build command, in final index.js file generated e.g. /dist/index.030asdf.js, it references hands.Hands undefined variable instead of Hands, so when i execute in production mode, javascript console throws error: Uncaught TypeError: Cannot read properties of undefined (reading 'Hands'). Same thing happens with rest of @mediapipe imports.

That issue does not happen with another non-mediapipe deps, such as "@formkit/auto-animate": "1.0.0-beta.3", or "@tanstack/react-query": "^4.19.0",

That issue doesn't happen either if i run vite server. The problem is only with vite build and importing @mediapipe deps on my code.

Here my tsconfig.json file:

{
  "compilerOptions": {
    "target": "es2016"
    "jsx": "react-jsx"
    "module": "commonjs"
    "esModuleInterop": true
    "forceConsistentCasingInFileNames": true
    "strict": true
    "noImplicitAny": false
  }
}

My vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import * as path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/scss/abstracts/variables.scss";`,
      },
    },
  },
  resolve: {
    /*eslint-disable-next-line*/
    alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
  },
})

Any ideas? Thanks!

Reproduction

https://stackblitz.com/edit/vitejs-vite-ajf9oa?file=mediapipe_hands.js

Steps to reproduce

Run npm install and npm run build. Download project from stackblitz and load dist/index.html into browser

System Info

node:16.18-alpine official docker image

Used Package Manager

npm

Logs

Vite build logs:

/app # npm run build

> xab-frontend@0.0.0 build
> vite build

vite v3.2.5 building for production...
transforming (196) src/icons/ShowPasswordIcon.jsx[BABEL] Note: The code generator has deoptimised the styling of /app/src/icons/XabLogo.jsx as it exceeds the max of 500KB.
transforming (261) node_modules/superjson/dist/esm/plainer.jssrc/scss/shared/_dategender.mixin.scss:2 Debug: .dropdownList
src/scss/shared/_dategender.mixin.scss:2 Debug: .radioGroup
transforming (471) node_modules/@mediapipe/drawing_utils/drawing_utils.jsUse of eval is strongly discouraged, as it poses security risks and may cause issues with minification
✓ 473 modules transformed.
dist/assets/xab_logo.45f2ffc1.png                  48.68 KiB
dist/assets/background_loader.b96392aa.png              1096.58 KiB
dist/assets/news_box_transparent.d0fe1948.svg           0.92 KiB
dist/assets/avatar_big.d34f254b.svg                     84.61 KiB
dist/assets/text_bubble_big.11054d92.svg                560.42 KiB
dist/assets/base_background.d0c292f8.png                33.62 KiB
dist/assets/video_poster.91b1e5ae.jpeg                  12.23 KiB
dist/assets/upbar_background.1406664d.svg               173.03 KiB
dist/assets/navbar_background.22672ba3.svg              628.72 KiB
dist/assets/loader.db7f44ad.svg                         3.38 KiB
dist/assets/stats_box.61d1f842.svg                      0.42 KiB
dist/assets/upbar_flag_box.d49688ff.svg                 0.89 KiB
dist/assets/upbar_box.c18fb6ac.svg                      0.97 KiB
dist/assets/bottom_section.314cec49.png                 6.31 KiB
dist/assets/experience_header_background.b563ba3d.svg   475.69 KiB
dist/assets/top_section.ae56c456.png                    6.92 KiB
dist/assets/feedback_small.ce76237f.svg                 127.90 KiB
dist/assets/practice_small.d6274628.svg                 90.59 KiB
dist/assets/theme_small.d75f3fe9.svg                    154.90 KiB
dist/assets/theory_small.ab9d51b0.svg                   129.28 KiB
dist/assets/text_bubble_2.08914013.svg                  560.41 KiB
dist/assets/missions_box.71307c9d.svg                   0.99 KiB
dist/assets/text_bubble.47b993bd.svg                    560.53 KiB
dist/index.html                                         0.44 KiB
dist/assets/index.fb943b55.css                          43.30 KiB / gzip: 8.61 KiB
dist/assets/index.65f809de.js                           2035.90 KiB / gzip: 1066.22 KiB

(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] 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.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

vitejs / vite