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

[theasteve]

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',
BASE_URL: '/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

• 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 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.

[theasteve]

If I run vite dev charts seem to display.

[bluwy]

Can you provide a repro with Vite and apexcharts only? (Ideally with as less dependencies as possible). The current repro link otherwise is also a 404.

[github-actions]

Hello @theasteve. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs reproduction will be closed if they have no activity within 3 days.