Is splitVendorChunkPlugin supported?

[frankykubo]

Hello,

I have a simple question. When I build my host app with enabled splitVendorChunkPlugin, the result is white page with no errors and no logs in browser.

When I remove the plugin, the page would normally load and I can see the result I want.

Am I doing something wrong here?

My vite.config.ts of host app:

import { defineConfig, splitVendorChunkPlugin } from 'vite';
import vue from '@vitejs/plugin-vue';
import svgLoader from 'vite-svg-loader';
import path from 'path';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
	plugins: [
		vue({
			script: {
				defineModel: true,
			},
		}),
		svgLoader(),
		splitVendorChunkPlugin(),
		federation({
			name: 'hostApp',
			remotes: {
				coreApp: 'http://localhost:2525/assets/remoteEntry.js',
			},
			shared: ['vue'],
		}),
	],
	resolve: {
		alias: {
			'@': path.resolve(__dirname, './src'),
		},
	},
	build: {
		target: "esnext",
	},
});

[rodri91]

@frankykubo were you able to find a solution for this?

[frankykubo]

@rodri91 Hi, I don't really remember, but I've taken a look into the mentioned vite.config.ts and I dont have splitVendorChunkPlugin enabled, si I guess I did give up with this.

[rodri91]

Thanks for the reply!

[monyasau]

@rodri91 @frankykubo, the splitVendorChunkPlugin is no longer supported and new fix is using build.rollupOptions.output.manualChunks

[tarmooo]

For me still happens when I use manualChunks, so this is kind of sad that it does not work. Or @monyasau you have some ideas why?

[monyasau]

@tarmooo it did work for me but i had to define everything i want to split explicitly, here's is what my vite config kinda looked like:

import { defineConfig } from 'vite';
import basicSsl from '@vitejs/plugin-basic-ssl'
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [
    basicSsl(),
    react(),
     ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  build: {
    chunkSizeWarningLimit: 400,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            if (id.includes('react') || id.includes('react-dom')) return 'react';
            if (id.includes('hls.js')) return 'hls';
            if (id.includes('@monyasau/private-provider')) return 'provider';
            if (id.includes('intersection-observer') || id.includes('swipeable')) return 'interactions';
            return 'vendor-all';
          }
        }
      }
    }
  }
})