question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
ggmartins091commented, May 30, 2022

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

 "overrides": {
    "rollup": "2.74.1"
  }
2reactions
sapphi-redcommented, May 30, 2022

It seems it happens with rollup 2.74.0, 2.75.0+. I assume https://github.com/rollup/rollup/pull/4510 is affecting this.

You could add resolutions field for a workaround.

  "resolutions": {
    "rollup": "2.74.1"
  }
Read more comments on GitHub >

github_iconTop Results From Across the Web

react.js Cannot read properties of undefined (reading 'context')
i want to get context of base_url, based on https://reactjs.org/docs/context.html but it show error. even directly using this.context still ...
Read more >
cannot read properties of undefined (reading '__h') - You.com
Describe the bug I'm getting TypeError: Cannot read properties of undefined (reading '__H') error on test environment when rendering a component which uses...
Read more >
How to solve my problem? (npm run build) - Laracasts
[vite:css] [postcss] Cannot read properties of undefined (reading 'config') file: /var/www/my_user/data/www/my_site/resources/sass/app.scss.
Read more >
TypeError: Cannot read Property 'split' of Undefined in JS
The "Cannot read property 'split' of undefined" error occurs when trying to call the split() method on a variable that stores an undefined...
Read more >
Dojos.js:9 Uncaught TypeError: Cannot read properties of ...
Dojos.js:9 Uncaught TypeError: Cannot read properties of undefined (reading 'characters') What am I doing wrong?
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found