Vite version 5 does not work with Apexcharts (But it does work with 4.5.0)

Describe the bug

I'm currently using Apexcharts package version 3.44.0 in my application. I was using Vite version 4.5.0 and when I built the assets I was able to see the charts in production: (See image below)

After upgrading to Vite 5.3.1 when I deploy to production the charts are not compiling: (See image below)

package.json

{
  "name": "aviato",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@headlessui/react": "^1.7.15",
    "@heroicons/react": "^2.0.18",
    "@mui/icons-material": "^5.15.10",
    "@mui/material": "^5.15.10",
    "@rails/activestorage": "^7.0.6",
    "@stripe/react-stripe-js": "^2.4.0",
    "@stripe/stripe-js": "^2.4.0",
    "@tailwindcss/forms": "^0.5.3",
    "activestorage": "^5.2.8-1",
    "apexcharts": "^3.44.0",
    "clsx": "^2.1.0",
    "crypto-js": "^4.2.0",
    "react": "^18.2.0",
    "react-currency-input-field": "^3.6.11",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.48.2",
    "react-router-dom": "^6.14.0",
    "tailwindcss": "^3.3.2"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.24",
    "tailwindcss": "^3.3.2",
    "vite": "^5.3.1",
    "vite-plugin-ruby": "^5.0.0",
    "vite-plugin-svgr": "^4.2.0"
  },
  "volta": {
    "node": "20.10.0"
  }
}

vite.config.mjs

import { defineConfig } from 'vite';
import RubyPlugin from 'vite-plugin-ruby';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [
    RubyPlugin(),
    svgr({
      svgrOptions: {
        exportType: 'named',
        ref: true,
        svgo: false,
        titleProp: true,
      },
      include: '**/*.svg',
    }),
  ],
  build: {
    minify: false,
    terserOptions: {
      compress: {
        keep_infinity: true,
        drop_console: false, // Keep console.log() statements
      },
    },
  },
});

Reproduction

https://github.com/smallulator/aviato

Steps to reproduce

vite build

System Info

Ok to proceed? (y) y

  System:
    OS: macOS 14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
    Memory: 222.47 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.1 - ~/.asdf/installs/nodejs/21.7.1/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.8.1 - ~/.asdf/plugins/nodejs/shims/npm
    Watchman: 2024.04.29.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 125.0.6422.176
    Safari: 17.5
  npmPackages:
    vite: ^5.3.1 => 5.3.1

Used Package Manager

yarn

Logs

Building with Vite ⚡️ vite v5.3.1 building for production... transforming... ✓ 2244 modules transformed. rendering chunks... computing gzip size... ../../public/vite/.vite/manifest-assets.json 0.00 kB │ gzip: 0.02 kB ../../public/vite/.vite/manifest.json 1.41 kB │ gzip: 0.32 kB ../../public/vite/assets/background-faqs-Dy5S0wkD.jpg 75.88 kB ../../public/vite/assets/background-call-to-action-KI4iaGKF.jpg 166.09 kB ../../public/vite/assets/background-features-CvbJXuf4.jpg 185.11 kB ../../public/vite/assets/application-B2VGx-Vv.css 72.80 kB │ gzip: 12.70 kB ../../public/vite/assets/application-BhUE0_2c.js 0.18 kB │ gzip: 0.17 kB │ map: 1.12 kB ../../public/vite/assets/application-kpZCztV6.js 2,166.73 kB │ gzip: 468.76 kB │ map: 4,255.44 kB ✓ built in 8.13s Build with Vite complete: /Users/stevenaguilar/aviato/public/vite 2024-06-18T18:36:05.054Z vite:config bundled config file loaded in 82.56ms 2024-06-18T18:36:05.181Z vite:config using resolved config: { plugins: [ 'vite:build-metadata', 'vite:watch-package-data', 'vite:pre-alias', 'alias', 'vite-plugin-svgr', 'vite:modulepreload-polyfill', 'vite:resolve', 'vite:html-inline-proxy', 'vite:css', 'vite:esbuild', 'vite:json', 'vite:wasm-helper', 'vite:worker', 'vite:asset', 'vite-plugin-ruby', 'vite:wasm-fallback', 'vite:define', 'vite:css-post', 'vite:build-html', 'vite:worker-import-meta-url', 'vite:asset-import-meta-url', 'vite:force-systemjs-wrap-complete', 'commonjs', 'vite:data-uri', 'vite:dynamic-import-vars', 'vite:import-glob', 'vite-plugin-ruby:assets-manifest', 'vite:build-import-analysis', 'vite:esbuild-transpile', 'vite:manifest', 'vite:reporter', 'vite:load-fallback' ], build: { target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ], cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ], outDir: '../../public/vite', assetsDir: 'assets', assetsInlineLimit: 4096, cssCodeSplit: true, sourcemap: true, rollupOptions: { input: [Object], output: [Object] }, minify: false, terserOptions: { compress: [Object] }, write: true, emptyOutDir: false, copyPublicDir: true, manifest: true, lib: false, ssr: false, ssrManifest: false, ssrEmitAssets: false, reportCompressedSize: true, chunkSizeWarningLimit: 500, watch: null, commonjsOptions: { include: [Array], extensions: [Array] }, dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }, modulePreload: { polyfill: true }, cssMinify: false }, mode: 'production', resolve: { mainFields: [ 'browser', 'module', 'jsnext:main', 'jsnext' ], conditions: [], extensions: [ '.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json' ], dedupe: [], preserveSymlinks: false, alias: [ [Object], [Object], [Object], [Object] ] }, base: '/vite/', envDir: '/Users/stevenaguilar/aviato', root: '/Users/stevenaguilar/aviato/app/javascript', server: { preTransformRequests: true, fs: { strict: true, allow: [Array], deny: [Array], cachedChecks: undefined }, host: 'localhost', https: false, port: 3036, strictPort: true, hmr: { clientPort: 3036 }, sourcemapIgnoreList: [Function: isInNodeModules$1], middlewareMode: false }, viteRuby: { additionalEntrypoints: [ '~/{assets,fonts,icons,images}/*/' ], assetsDir: 'assets', autoBuild: 'false', buildCacheDir: '/Users/stevenaguilar/aviato/tmp/cache/vite', publicOutputDir: 'vite', configPath: 'config/vite.json', devServerConnectTimeout: '0.01', publicDir: 'public', entrypointsDir: 'entrypoints', sourceCodeDir: 'app/javascript', skipCompatibilityCheck: 'false', skipProxy: 'false', host: 'localhost', https: false, port: 3036, hideBuildConsoleOutput: 'false', viteBinPath: 'node_modules/.bin/vite', watchAdditionalPaths: [], base: '/vite/', ssrBuildEnabled: 'false', ssrEntrypoint: '~/ssr/ssr.{js,ts,jsx,tsx}', ssrOutputDir: '/Users/stevenaguilar/aviato/public/vite-ssr', mode: 'production', ssrBuild: false, server: { fs: [Object], host: 'localhost', https: false, port: 3036, strictPort: true, hmr: [Object] }, root: '/Users/stevenaguilar/aviato/app/javascript', outDir: '../../public/vite', entrypoints: [ [Array], [Array], [Array], [Array] ] }, configFile: '/Users/stevenaguilar/aviato/vite.config.mjs', configFileDependencies: [ '/Users/stevenaguilar/aviato/vite.config.mjs' ], inlineConfig: { root: undefined, base: undefined, mode: 'production', configFile: undefined, logLevel: undefined, clearScreen: undefined, build: {} }, rawBase: '/vite/', publicDir: '/Users/stevenaguilar/aviato/app/javascript/public', cacheDir: '/Users/stevenaguilar/aviato/node_modules/.vite', command: 'build', ssr: { target: 'node', optimizeDeps: { noDiscovery: true, esbuildOptions: [Object] } }, isWorker: false, mainConfig: null, bundleChain: [], isProduction: true, css: { lightningcss: undefined }, esbuild: { jsxDev: false }, preview: { port: undefined, strictPort: true, host: 'localhost', https: false, open: undefined, proxy: undefined, cors: undefined, headers: undefined }, env: { VITE_RUBY_ASSETS_DIR: 'assets', VITE_RUBY_DEV_SERVER_CONNECT_TIMEOUT: '0.01', VITE_RUBY_VITE_BIN_PATH: 'node_modules/.bin/vite', VITE_RUBY_ENTRYPOINTS_DIR: 'entrypoints', VITE_RUBY_PUBLIC_OUTPUT_DIR: 'vite', VITE_RUBY_SSR_BUILD_ENABLED: 'false', VITE_RUBY_BUILD_CACHE_DIR: '/Users/stevenaguilar/aviato/tmp/cache/vite', VITE_RUBY_SKIP_PROXY: 'false', VITE_RUBY_ROOT: '/Users/stevenaguilar/aviato', VITE_RUBY_SOURCE_CODE_DIR: 'app/javascript', VITE_RUBY_AUTO_BUILD: 'false', VITE_RUBY_HIDE_BUILD_CONSOLE_OUTPUT: 'false', VITE_RUBY_MODE: 'production', VITE_RUBY_BASE: '', VITE_RUBY_CONFIG_PATH: 'config/vite.json', VITE_RUBY_PUBLIC_DIR: 'public', VITE_RUBY_SSR_OUTPUT_DIR: '/Users/stevenaguilar/aviato/public/vite-ssr', VITE_RUBY_SSR_ENTRYPOINT: '~/ssr/ssr.{js,ts,jsx,tsx}', VITE_RUBY_HTTPS: 'false', VITE_RUBY_SKIP_COMPATIBILITY_CHECK: 'false', VITE_RUBY_PORT: '3036', VITE_RUBY_HOST: 'localhost', BASEURL: '/vite/', MODE: 'production', DEV: false, PROD: true }, assetsInclude: [Function: assetsInclude], logger: { hasWarned: false, info: [Function: info], warn: [Function: warn], warnOnce: [Function: warnOnce], error: [Function: error], clearScreen: [Function: clearScreen], hasErrorLogged: [Function: hasErrorLogged] }, packageCache: Map(3) { 'fnpd/Users/stevenaguilar/aviato' => { dir: '/Users/stevenaguilar/aviato', data: [Object], hasSideEffects: [Function: hasSideEffects], webResolvedImports: {}, nodeResolvedImports: {}, setResolvedCache: [Function: setResolvedCache], getResolvedCache: [Function: getResolvedCache] }, 'fnpd/Users/stevenaguilar/aviato/app/javascript' => { dir: '/Users/stevenaguilar/aviato', data: [Object], hasSideEffects: [Function: hasSideEffects], webResolvedImports: {}, nodeResolvedImports: {}, setResolvedCache: [Function: setResolvedCache], getResolvedCache: [Function: getResolvedCache] }, 'fnpd/Users/stevenaguilar/aviato/app' => { dir: '/Users/stevenaguilar/aviato', data: [Object], hasSideEffects: [Function: hasSideEffects], webResolvedImports: {}, nodeResolvedImports: {}, setResolvedCache: [Function: setResolvedCache], getResolvedCache: [Function: getResolvedCache] }, set: [Function (anonymous)] }, createResolver: [Function: createResolver], optimizeDeps: { holdUntilCrawlEnd: true, esbuildOptions: { preserveSymlinks: false } }, worker: { format: 'iife', plugins: '() => plugins', rollupOptions: {} }, appType: 'spa', experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false }, getSortedPlugins: [Function: getSortedPlugins], getSortedPluginHooks: [Function: getSortedPluginHooks] } node_modules/@mui/material/Alert/index.js (1:0): Module level directives cause errors when bundled, "use client" in "node_modules/@mui/material/Alert/index.js" was ignored. node_modules/@mui/material/AlertTitle/index.js (1:0): Module level directives cause errors when bundled, "use client" in "node_modules/@mui/material/AlertTitle/index.js" was ignored. node_modules/@mui/material/AppBar/index.js (1:0): Module level directives cause errors when bundled, "use client" in "node_modules/@mui/material/AppBar/index.js" was ignored. node_modules/@mui/material/Autocomplete/index.js (1:0): Module level directives cause errors when bundled, "use client" in "node_modules/@mui/material/Autocomplete/index.js" was ignored. node_modules/@mui/material/Avatar/index.js (1:0): Module level directives cause errors when bundled, "use client" in "node_modules/@mui/material/Avatar/index.js" was ignored. node_modules/@mui/material/AvatarGroup/index.js (1:0): Module level directives cause errors when bundled, "use client" in "node_modules/@mui/material/AvatarGroup/index.js" was ignored. node_modules/@mui/material/Backdrop/index.js (1:0): Module level directives cause errors when bundled, "use client" in "node_modules/@mui/material/Backdrop/index.js" was ignored. node_modules/@mui/material/BottomNavigation/index.js (1:0): Module level directives cause errors when bundled, "use client" in "node_modules/@mui/material/BottomNavigation/index.js" was ignored. node_modules/@mui/material/BottomNavigationAction/index.js (1:0): Module level directives cause errors when bundled, "use client" in "node_modules/@mui/material/BottomNavigationAction/index.js" was ignored. node_modules/@mui/material/Badge/index.js (1:0): Module level directives cause errors when bundled, "use client" in "node_modules/@mui/material/Badge/index.js" was ignored. node_modules/@mui/material/Box/index.js (1:0): Module level directives cause errors when bundled, "use client" in "node_modules/@mui/material/Box/index.js" was ignored. node_modules/@mui/material/Breadcrumbs/index.js (1:0): Module level directives cause errors when bundled, "use client" in "node_modules/@mui/material/Breadcrumbs/index.js" was ignored. node_modules/@mui/material/Button/index.js (1:0): Module level directives cause errors when bundled, "use client" in "node_modules/@mui/material/Button/index.js" was ignored. node_modules/@mui/material/utils/index.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.

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