I am testing the new build.chunkImportMap option in Vite 8.1 with a React app that uses React.lazy().
My basic setup
import { lazy, Suspense, useState } from 'react'
const LazyPage = lazy(() => import('./LazyPage.jsx'))
export default function App() {
const [showPage, setShowPage] = useState(false)
return (
<>
<button onClick={() => setShowPage(true)}>
Load page
</button>
{showPage && (
<Suspense fallback={<p>Loading...</p>}>
<LazyPage />
</Suspense>
)}
</>
)
}
My Vite config
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
build: {
chunkImportMap: true
}
})
I built version A, opened it in the browser and left the tab open without loading the lazy component.
Then I changed LazyPage.jsx built version B and replaced the previous files in dist.
When I went back to the original tab and clicked the button it still tried to load the chunk from version A. Since that file was removed by the new build the request failed with
TypeError: Failed to fetch dynamically imported module
Refreshing the page fixes it.
I assume chunkImportMap would help prevent an older tab from requesting a chunk that no longer exists after a new deployment. But that does not appear to be doing that.
Does chunkImportMap only help keep chunk references more stable between builds while an open tab still uses the import map from the version it originally loaded?
Do I still need to keep the previous build files available for a period of time or reload the page when vite:preloadError fires?