topic calcite-components-react with Vite - errors during HMR in ArcGIS JavaScript Maps SDK Questions

calcite-components-react with Vite - errors during HMR

AndresKasekamp — Mon, 01 Apr 2024 07:18:16 GMT

I have a problem using calcite-components-react with Vite dev server in HMR mode. The components, when applying changes or even on initial load, seem to get duplicated.

For example, the layerlist as shown here:

The current workaround is destroying the view with view.destroy() in useEffect cleanup, and then doing a full reload when changes are made, this at least assures that the components do not get duplicated, but it defeats the purpose of using HMR.

How it should look like:

There are no problems in production build.

I have re-created a minimal example here:

https://github.com/AndresKasekamp/calcite-arcgis-hmr

Re: calcite-components-react with Vite - errors during HMR

imritanshu — Mon, 01 Apr 2024 09:29:26 GMT

@AndresKasekamp

hey, the reason is you are running you app in strict mode.

comment these lines and app should work fine.

Also one more observation, every variable you are storing in state, which may cause issue as application will grow. Try state only where it is must. Else you can simply store values without state also.

Thanks.

if solution works please mark it as answer.

Re: calcite-components-react with Vite - errors during HMR

AndresKasekamp — Mon, 01 Apr 2024 10:35:14 GMT

Disabling StrictMode does not work.

Re: calcite-components-react with Vite - errors during HMR

imritanshu — Mon, 01 Apr 2024 10:49:05 GMT

Probably you are doing something wrong. I cloned your sample and commented the strict mode. It is working without any issue.

Have a look.

Re: calcite-components-react with Vite - errors during HMR

imritanshu — Mon, 01 Apr 2024 10:52:43 GMT

for your reference.

https://legacy.reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects

Re: calcite-components-react with Vite - errors during HMR

AndresKasekamp — Mon, 01 Apr 2024 11:06:08 GMT

The first render is okay, so it would be the same as calling view.destroy(). However, when you modify App.jsx file in any way with dev server running (comments, new line, imports, etc), then it will cause the components to behave unexpectedly.

Re: calcite-components-react with Vite - errors during HMR

AndyGup — Mon, 01 Apr 2024 15:40:52 GMT

Hi @AndresKasekamp you'll need to do further testing by removing '@arcgis/core' functionality and calcite elements one-by-one to try and find the root cause. Otherwise there's too much going on in the sample including the calcite react wrapper, calcite-panel, calcite-shell, calcite-shell-panel and various '@arcgis/core' modules.