React 18 and VITE for fast hot reload

[flieks]

Description

The current react app has slow hot reload which is bad for productivity.

Upgrading to react 18 makes sense, being compatible with newer libraries and then its compatible with VITE esbuild system which offers very fast hot reload. Work involved is changing all require imports to es module imports, and configuring vite so it replaces the current webpack configuration.

What kind of improvement you want to add? (check one with "x", remove the others)

• [x ] Build related changes

[flieks]

I changed all of require() imports to ESM module imports and renamed .js to .jsx but still there is some issue with WithExtensions as shown in stacktrace:

    in StandardRouter
    in Connect(StandardRouter) (created by DragDropContext(Connect(StandardRouter)))
    in DragDropContext(Connect(StandardRouter))
    in Provider2
    in StandardApp
    in WithExtensions

with error:

react-dom.development.js:12251  Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

[flieks]

its something to do with the hooks inside Theme.js.

If i remove the hooks there, it can render something

[flieks]

Are there any plans to move away from slow webpack ?

[offtherailz]

Hi, for the moment there are no plans to switch the vite. But fixing compatibility with next versions of react and alignign the module syntax is good for future in any case.