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?
