Frontend broke with VAADIN 23.2.0 due to Vite being used and not allowing `require` anymore

Description of the bug

After updating from VAADIN 23.1.7 to VAADIN 23.2.0, the (main page of the) application can’t be displayed anymore. In the Chrome console, the error is simple:

Uncaught (in promise) ReferenceError: require is not defined at generated-flow-imports.9cd14ffe.js:formatted:58387:10

As far as I know, VAADIN 23.2.0 started to use Vite instead of Webpack where Vite simply doesn’t allow require to be used due to ES5 compatibility(?).

We had several usages of require in our frontend where I was able to eliminate most of them, except for 2 usages.

• cytoscape-expand-collapse (has no module support yet)
• cytoscape-node-html-label (has invalid module support)

I researched a lot for possible solutions finding - amongst others - the following issue: https://github.com/vitejs/vite/issues/3409 Sadly, none of the mentioned solutions (using the vite-plugin-commonjs plugin and using transformMixedEsModules: true) worked out for me.

I also tried setting "module": "commonjs" in my tsconfig.json but that didn’t work out either due to exporting my own classes / components.

I know this is not really a bug but how are we supposed to migrate our projects in such a case? In my case the TS file throwing the error is nearly 3 years old and the last change was over a year ago.

Minimal reproducible example

See this example project: project-with-require.zip (with Git history)

On commit cb4143d9cbc484cb2c2aaed59977737f174409a8, the project works as expected when using VAADIN 23.1.7. After updating to VAADIN 23.2.0 (ec6e6b64e46b622eb8641634ec5fe40455524558, state of the ZIP), the same error message from above will be displayed in the Browser console.

Expected behavior

I expect the application to show the main page.

Actual behavior

Even the main page is not showing up anymore, the site looks like it’s loading forever. An error can be found in the Browser console.

Versions:

- Vaadin / Flow version: VAADIN 23.2.0
- Java version: 17.0.2 2022-01-18 LTS
- OS version: Windows 10 21H1
- Browser version (if applicable): Not needed.
- Application Server (if applicable): Not needed.
- IDE (if applicable): Not needed.
- Development or production mode: Both.
- Project from start.vaadin.com or activated in application: See minimal reproducible example above.

[Artur-]

If you use import f from 'fetch-retry'; instead it seems TypeScript gets the type correctly

[knoobie]

For the meantime you could still use webpack which is behind a “feature / deprecation” flag to allow the flow team to find a proper solution and still be on the latest version