calcite-components-react with Vite - errors during HMR

[AndresKasekamp]

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

[imritanshu]

@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.

[AndresKasekamp]

Disabling StrictMode does not work.

[imritanshu]

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

Have a look.

[imritanshu]

for your reference.

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

[AndresKasekamp]

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.

[AndyGup]

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.