Vite + React: "TypeError: Cannot read properties of undefined (reading 'classes')"

[AnthonyLzq]

Describe the bug

I'm running an app with react-tsparticles and mui. Whenever I run the app with vite everything works like a charm, but when I use build and preview it fails and I get the following error twice: Uncaught TypeError: Cannot read properties of undefined (reading 'classes'). However, build was fine.

Reproduction

https://github.com/AnthonyLzq/vite-test

System Info

System:
  OS: Linux 5.17 Manjaro Linux
  CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
  Memory: 10.47 GB / 15.10 GB
  Container: Yes
  Shell: 5.9 - /usr/bin/zsh
Binaries:
  Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
  Yarn: 1.22.18 - ~/.nvm/versions/node/v16.15.0/bin/yarn
  npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
  Watchman: 20210801.210521.0 - /usr/local/bin/watchman
Browsers:
  Brave Browser: 102.1.39.111
  Firefox: 100.0.2
npmPackages:
  @vitejs/plugin-react: ^1.3.2 => 1.3.2 
  @vitejs/plugin-react-refresh: ^1.3.6 => 1.3.6 
  vite: ^2.9.9 => 2.9.9

Used Package Manager

yarn

Logs

vite:config bundled config file loaded in 67.15ms +0ms
vite:config using resolved config: {
vite:config   plugins: [
vite:config     'vite:build-metadata',
vite:config     'alias',
vite:config     'vite:react-babel',
vite:config     'vite:react-refresh',
vite:config     'vite:react-jsx',
vite:config     'vite:modulepreload-polyfill',
vite:config     'vite:resolve',
vite:config     'vite:html-inline-proxy',
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:build-html',
vite:config     'vite:worker-import-meta-url',
vite:config     'vite:watch-package-data',
vite:config     'commonjs',
vite:config     'vite:data-uri',
vite:config     'rollup-plugin-dynamic-import-variables',
vite:config     'vite:asset-import-meta-url',
vite:config     'vite:build-import-analysis',
vite:config     'vite:esbuild-transpile',
vite:config     'vite:terser',
vite:config     'vite:reporter',
vite:config     'vite:load-fallback'
vite:config   ],
vite:config   build: {
vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
vite:config     polyfillModulePreload: true,
vite:config     outDir: 'dist',
vite:config     assetsDir: 'assets',
vite:config     assetsInlineLimit: 4096,
vite:config     cssCodeSplit: true,
vite:config     cssTarget: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
vite:config     sourcemap: false,
vite:config     rollupOptions: {},
vite:config     minify: 'esbuild',
vite:config     terserOptions: {},
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     reportCompressedSize: true,
vite:config     chunkSizeWarningLimit: 500,
vite:config     watch: null,
vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
vite:config   },
vite:config   resolve: { dedupe: [ 'react', 'react-dom' ], alias: [ [Object], [Object] ] },
vite:config   optimizeDeps: {
vite:config     include: [ 'react/jsx-dev-runtime' ],
vite:config     esbuildOptions: { keepNames: undefined, preserveSymlinks: undefined }
vite:config   },
vite:config   configFile: '/home/anthony/Development/ACECOM/harper-frontend-graphql/vite.config.ts',
vite:config   configFileDependencies: [
vite:config     '/home/anthony/Development/ACECOM/harper-frontend-graphql/vite.config.ts'
vite:config   ],
vite:config   inlineConfig: {
vite:config     root: undefined,
vite:config     base: undefined,
vite:config     mode: undefined,
vite:config     configFile: undefined,
vite:config     logLevel: undefined,
vite:config     clearScreen: undefined,
vite:config     build: {}
vite:config   },
vite:config   root: '/home/anthony/Development/ACECOM/harper-frontend-graphql',
vite:config   base: '/',
vite:config   publicDir: '/home/anthony/Development/ACECOM/harper-frontend-graphql/public',
vite:config   cacheDir: '/home/anthony/Development/ACECOM/harper-frontend-graphql/node_modules/.vite',
vite:config   command: 'build',
vite:config   mode: 'production',
vite:config   isWorker: false,
vite:config   isProduction: true,
vite:config   server: {
vite:config     preTransformRequests: true,
vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
vite:config   },
vite:config   preview: {
vite:config     port: undefined,
vite:config     strictPort: undefined,
vite:config     host: undefined,
vite:config     https: undefined,
vite:config     open: undefined,
vite:config     proxy: undefined,
vite:config     cors: undefined,
vite:config     headers: undefined
vite:config   },
vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
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     hasErrorLogged: [Function: hasErrorLogged]
vite:config   },
vite:config   packageCache: Map(0) { set: [Function (anonymous)] },
vite:config   createResolver: [Function: createResolver],
vite:config   worker: {
vite:config     format: 'iife',
vite:config     plugins: [
vite:config       [Object], [Object], [Object],
vite:config       [Object], [Object], [Object],
vite:config       [Object], [Object], [Object],
vite:config       [Object], [Object], [Object],
vite:config       [Object], [Object], [Object],
vite:config       [Object], [Object], [Object],
vite:config       [Object], [Object], [Object],
vite:config       [Object], [Object], [Object],
vite:config       [Object]
vite:config     ],
vite:config     rollupOptions: {}
vite:config   }
vite:config } +6ms
vite v2.9.9 building for production...
✓ 1348 modules transformed.
dist/assets/favicon.8cc0dae5.svg      1.54 KiB
dist/assets/acecomLogo.a761dc38.svg   11.45 KiB
dist/index.html                       0.40 KiB
dist/assets/pathseg.7140b611.js       38.94 KiB / gzip: 4.35 KiB
dist/assets/index.14aa77e9.js         475.18 KiB / gzip: 143.54 KiB
Done in 5.93s.

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 https://github.com/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.

[sapphi-red]

It seems it happens with rollup 2.74.0, 2.75.0+. I assume rollup/rollup#4510 is affecting this.

You could add resolutions field for a workaround.

  "resolutions": {
    "rollup": "2.74.1"
  }

[AnthonyLzq]

Thanks. It works now, should I mark this issue as resolved?

[AnthonyLzq]

It seems it happens with rollup 2.74.0, 2.75.0+. I assume rollup/rollup#4510 is affecting this.

You could add resolutions field for a workaround.

  "resolutions": {
    "rollup": "2.74.1"
  }

For those who may not now where to put the resolutions, add it to your package.json and then run again yarn install.

[ggmartins091]

For those who use npm instead of yarn, use "overrides" instead of yarn`s "resolutions".

 "overrides": {
    "rollup": "2.74.1"
  }

[sapphi-red]

Let's close this issue as it was reported to rollup. rollup/rollup#4516