fix(backoffice): React 19 read-only property runtime errors

Menambahkan resolve.dedupe untuk react/react-dom/@tanstack/react-router/
@tanstack/react-query di vite.config.ts agar tidak ada duplicate instance
yang di-bundle dari Radix primitives.

Menghapus StrictMode dari main.tsx karena combining StrictMode dengan
recharts 3.x (yang bawa @reduxjs/toolkit + immer autoFreeze) + TanStack
Router 1.168 trigger "Cannot assign to read only property 'lanes' of
#<li>" dan "pendingBuiltLocation of #<zr>" saat navigate.

Juga perbaiki duplikasi block build: di config lama ada dua property
build (yang kedua menimpa yang pertama jadi rolldownOptions hilang).
Sekarang rolldownOptions code-splitting vendor aktif.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maulana Sodiqin
2026-04-12 23:57:57 +07:00
co-authored by Claude Opus 4.6
parent 81999aa044
commit 06c69cb3c5
2 changed files with 10 additions and 8 deletions
+4 -7
View File
@@ -1,4 +1,3 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { RouterProvider, createRouter } from '@tanstack/react-router'
import { QueryProvider } from '@imphnen-frontend-service/utils'
@@ -19,10 +18,8 @@ const rootElement = document.getElementById('root')
if (!rootElement) throw new Error('Failed to find the root element')
createRoot(rootElement).render(
<StrictMode>
<QueryProvider>
<RouterProvider router={router} />
<Toaster position="top-right" />
</QueryProvider>
</StrictMode>
<QueryProvider>
<RouterProvider router={router} />
<Toaster position="top-right" />
</QueryProvider>
)
+6 -1
View File
@@ -16,7 +16,9 @@ export default defineConfig(() => ({
port: 3001,
host: 'localhost',
},
build: { rolldownOptions: { output: { codeSplitting: { groups: [{ name: 'vendor', test: /node_modules/ }] } } } },
resolve: {
dedupe: ['react', 'react-dom', '@tanstack/react-router', '@tanstack/react-query'],
},
plugins: [
TanStackRouterVite({
routeFileIgnorePattern: '_components|_hooks|_hook|_data',
@@ -32,6 +34,9 @@ export default defineConfig(() => ({
commonjsOptions: {
transformMixedEsModules: true,
},
rolldownOptions: {
output: { codeSplitting: { groups: [{ name: 'vendor', test: /node_modules/ }] } },
},
},
test: {
watch: false,