I’m building a Chrome extension using React 18 and Vite 5, trying to implement code splitting for optimization. Despite excluding background scripts from splitting, I’m getting chunk loading errors. Problem Context: • Using React.lazy for component-level code splitting • Configured Vite to exclude background.js from splitting • Components load fine in regular React app, but fail in extension

vite.config.ts :

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, 'index.html'),
        background: path.resolve(__dirname, 'src/background.ts')
      },
      output: {
        entryFileNames: '[name].js',
        chunkFileNames: '[name].js',
        assetFileNames: '[name].[ext]'
        manualChunks: (id) => {
          if (id.includes('background.js')) return undefined;
          return 'vendor';
        }
      }
    }
  }
});

popup component looks like this :

const LazyComponent = React.lazy(() => import('./PopupSection'));

function Popup() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

What I’ve Tried so far is to : 1. Excluded background script from manualChunks 2. Verified manifest includes all chunk paths in web_accessible_resources 3. Tested with dynamic imports without React.lazy - same issue 4. Regular React app works with same config, extension fails Question: Why does code splitting fail in the Chrome extension environment despite excluding background scripts from splitting? How can I properly implement component-level lazy loading while maintaining extension functionality? Are there special considerations for Vite’s build process in extensions?