Code splitting the wrong way?

[mmarrius]

My initial package had 800kb so I got a warning that it's too big so it should be separated. The big package is video.js who occupies about half of that size.
My vite.config.js looks like this:

defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.html"),
      },
      output: {
        manualChunks(id) {
          if (id.includes('video.js')) {
            return 'video.js';
          }
        },
      }
    },
  },
  plugins: [
    {
      name: 'treat-js-files-as-jsx',
      async transform(code, id) {
        if (!id.match(/src\/.*\.js$/))  return null

        // Use the exposed transform from vite, instead of directly
        // transforming with esbuild
        return transformWithEsbuild(code, id, {
          loader: 'jsx',
          jsx: 'automatic',
        })
      },
    },
    react(),
    svgr(),
    splitVendorChunkPlugin(),
  ],
  optimizeDeps: {
    force: true,
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  },
  server: {
    open: '/',
  }
});

The app still works fine in dev mode but when running in in prod mode(vite preview) I get a weird error in the split package
Uncaught TypeError: right-hand side of 'in' should be an object, got undefined <anonymous> http://localhost:4173/assets/video.js-a16fdf23.js:11

Am I doing something wrong or is this package simply too big to be loaded separately and the best way is to leave them all together?
Here's all the chunks