Fixes HMR (keyboard shortcuts should be working after making changes
after this).

Looks like the issue was that we were recreating the root using the same
element. Used a solution similar to
[this](https://stackoverflow.com/a/72139826/1810018) to prevent that
from happening.


![image](https://github.com/tldraw/tldraw/assets/2523721/f684868e-fb0b-4882-bd66-6fa4ccd33edc)

It caused other issues as well

![image](https://github.com/tldraw/tldraw/assets/2523721/ac19582e-f043-4c01-823c-cc815a808894)

### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Release Notes

- Fixes HMR in local dev.
This commit is contained in:
Mitja Bezenšek 2023-12-08 11:30:34 +01:00 committed by GitHub
parent 9915f2b0f6
commit e3d21e0b2b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -238,16 +238,17 @@ const router = createBrowserRouter([
...allExamples,
])
const rootElement = document.getElementById('root')
const root = createRoot(rootElement!)
root.render(
<StrictMode>
<ErrorBoundary
fallback={(error) => <DefaultErrorFallback error={error} />}
onError={(error) => console.error(error)}
>
<RouterProvider router={router} />
</ErrorBoundary>
</StrictMode>
)
document.addEventListener('DOMContentLoaded', () => {
const rootElement = document.getElementById('root')!
const root = createRoot(rootElement!)
root.render(
<StrictMode>
<ErrorBoundary
fallback={(error) => <DefaultErrorFallback error={error} />}
onError={(error) => console.error(error)}
>
<RouterProvider router={router} />
</ErrorBoundary>
</StrictMode>
)
})