EuiDataGrid: regeneratorRuntime is not defined

[lightwave]

Latest version of eui is used to reproduce this problem.

"@elastic/datemath": "^5.0.3",
"@elastic/eui": "^75.1.2",
"@emotion/css": "^11.10.6",
"@emotion/react": "^11.10.6",
"@faker-js/faker": "^7.6.0",
"moment": "^2.29.4",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.8.1"

Codesandbox link to see errors: https://codesandbox.io/p/sandbox/elastic-ui-data-grid-regeneratorruntime-is-not-defined-3bxblv

EuiDataGrid broke with the following errors in browser console.

Uncaught ReferenceError: regeneratorRuntime is not defined
    at scrolling.js:73:15
    at useScrollCellIntoView2 (scrolling.js:219:41)
    at useScroll2 (scrolling.js:23:33)
    at EuiDataGridBody2 (data_grid_body.js:318:3)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20074:13)
    at beginWork (react-dom.development.js:21587:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
preview-protocol.js:13 The above error occurred in the <EuiDataGridBody2> component:

    at EuiDataGridBody2 (https://3bxblv-5173.preview.csb.app/node_modules/.vite/deps/@elastic_eui.js?v=50469cf3:104623:37)
    at div
    at div
    at div
    at https://3bxblv-5173.preview.csb.app/node_modules/.vite/deps/@elastic_eui.js?v=50469cf3:61997:22
    at FocusLockUI (https://3bxblv-5173.preview.csb.app/node_modules/.vite/deps/@elastic_eui.js?v=50469cf3:62089:33)
    at https://3bxblv-5173.preview.csb.app/node_modules/.vite/deps/@elastic_eui.js?v=50469cf3:62337:20
    at EuiFocusTrap2 (https://3bxblv-5173.preview.csb.app/node_modules/.vite/deps/@elastic_eui.js?v=50469cf3:64089:5)
    at https://3bxblv-5173.preview.csb.app/node_modules/.vite/deps/@elastic_eui.js?v=50469cf3:108640:37
    at https://3bxblv-5173.preview.csb.app/src/App.tsx:494:39
    at CurrentEuiBreakpointProvider2 (https://3bxblv-5173.preview.csb.app/node_modules/.vite/deps/@elastic_eui.js?v=50469cf3:49752:26)
    at EuiThemeProvider2 (https://3bxblv-5173.preview.csb.app/node_modules/.vite/deps/@elastic_eui.js?v=50469cf3:49486:25)
    at EuiCacheProvider2 (https://3bxblv-5173.preview.csb.app/node_modules/.vite/deps/@elastic_eui.js?v=50469cf3:130210:24)
    at EuiProvider2 (https://3bxblv-5173.preview.csb.app/node_modules/.vite/deps/@elastic_eui.js?v=50469cf3:130222:28)

[aircloud]

This is because after compiling, the dependent regenerator-runtime is missing, you can add it through babel, but here I give a simple solution:

pnpm add regenerator-runtime

at the top of your file:

import 'regenerator-runtime/runtime'

[lightwave]

This dependency should be added to elastic/ui. Right? Users of eui shouldn't have to add this to project dependencies.

[cee-chen]

Apologies for missing this / the super delayed response, y'all. Based on your CodeSandbox link, this looks like an issue with using EUI+Vite, which EUI currently does not actively support. It's on our long-term roadmap and we're hoping to add support within the next year, but we ask for your patience and to keep in mind that we're a pretty small dev team.

I'm closing this issue (as @aircloud has kindly provided a workaround) mostly to consolidate our efforts into more tooling support as part of #2760, but please don't hesitate to continue reporting issues that you come across in Vite.