Hi I am trying to display a modal dialog on a connect admin page module on Atlassian-Connect-Express (ACE). I got the page and a hello world to display alright but when I copy the example from https://atlassian.design/components/modal-dialog/examples#default and try to render it, I get the following error log in my browser console (nothing on the server or the typescript compiler)
react.development.js:401 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
printWarning @ react.development.js:401
error @ react.development.js:373
createElementWithValidation @ react.development.js:1979
(anonymous) @ adminpage?xdm_e=https%3A%2F%2Fjrms.atlassian.net&xdm_c=channel-crewmaker__crewmaker-setup-menu&cp=&xdm_deprecated_addon_key_do_not_use=crewmaker&lic=none&cv=1001.0.0-SNAPSHOT&jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI2MTk2MTc2YmI0M2Q1YjAwNmFhZTA5NzciLCJxc2giOiIzOWRjYTc0MGYyYzQwMjAyOTViNTc3Y2U1N2YwYjM0YzQxOTc5ZTNlZmJkNjNjYjNiOGIzNGI3NDhhZGZiZTRkIiwiaXNzIjoiZmY4ZTMzZDAtNTc0Yi0zM2E0LWExNWMtOGRlODA0ZDUxN2NlIiwiY29udGV4dCI6e30sImV4cCI6MTY0MzAzMjA5NSwiaWF0IjoxNjQzMDMxMTk1fQ.oIBYuWiSy2rkcyE0gNcqYJ-Lqaj9kBqFVgOWh02KAPw:23
react-dom.development.js:24100 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
at createFiberFromTypeAndProps (react-dom.development.js:24100:23)
at createFiberFromElement (react-dom.development.js:24123:17)
at reconcileSingleElement (react-dom.development.js:14368:25)
at reconcileChildFibers (react-dom.development.js:14428:37)
at reconcileChildren (react-dom.development.js:16904:30)
at updateHostRoot (react-dom.development.js:17393:7)
at beginWork (react-dom.development.js:18759:16)
at HTMLUnknownElement.callCallback (react-dom.development.js:182:16)
at Object.invokeGuardedCallbackDev (react-dom.development.js:231:18)
at invokeGuardedCallback (react-dom.development.js:286:33)
createFiberFromTypeAndProps @ react-dom.development.js:24100
createFiberFromElement @ react-dom.development.js:24123
reconcileSingleElement @ react-dom.development.js:14368
reconcileChildFibers @ react-dom.development.js:14428
reconcileChildren @ react-dom.development.js:16904
updateHostRoot @ react-dom.development.js:17393
beginWork @ react-dom.development.js:18759
callCallback @ react-dom.development.js:182
invokeGuardedCallbackDev @ react-dom.development.js:231
invokeGuardedCallback @ react-dom.development.js:286
beginWork$1 @ react-dom.development.js:23338
performUnitOfWork @ react-dom.development.js:22292
workLoopSync @ react-dom.development.js:22265
performSyncWorkOnRoot @ react-dom.development.js:21891
scheduleUpdateOnFiber @ react-dom.development.js:21323
updateContainer @ react-dom.development.js:24508
(anonymous) @ react-dom.development.js:24893
unbatchedUpdates @ react-dom.development.js:22038
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24892
render @ react-dom.development.js:24975
(anonymous) @ adminpage?xdm_e=https%3A%2F%2Fjrms.atlassian.net&xdm_c=channel-crewmaker__crewmaker-setup-menu&cp=&xdm_deprecated_addon_key_do_not_use=crewmaker&lic=none&cv=1001.0.0-SNAPSHOT&jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI2MTk2MTc2YmI0M2Q1YjAwNmFhZTA5NzciLCJxc2giOiIzOWRjYTc0MGYyYzQwMjAyOTViNTc3Y2U1N2YwYjM0YzQxOTc5ZTNlZmJkNjNjYjNiOGIzNGI3NDhhZGZiZTRkIiwiaXNzIjoiZmY4ZTMzZDAtNTc0Yi0zM2E0LWExNWMtOGRlODA0ZDUxN2NlIiwiY29udGV4dCI6e30sImV4cCI6MTY0MzAzMjA5NSwiaWF0IjoxNjQzMDMxMTk1fQ.oIBYuWiSy2rkcyE0gNcqYJ-Lqaj9kBqFVgOWh02KAPw:23
react-dom.development.js:242 Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.
at Object.invokeGuardedCallbackDev (react-dom.development.js:242:21)
at invokeGuardedCallback (react-dom.development.js:286:33)
at beginWork$1 (react-dom.development.js:23338:9)
at performUnitOfWork (react-dom.development.js:22292:14)
at workLoopSync (react-dom.development.js:22265:24)
at performSyncWorkOnRoot (react-dom.development.js:21891:11)
at scheduleUpdateOnFiber (react-dom.development.js:21323:9)
at updateContainer (react-dom.development.js:24508:5)
at react-dom.development.js:24893:9
at unbatchedUpdates (react-dom.development.js:22038:14)
invokeGuardedCallbackDev @ react-dom.development.js:242
invokeGuardedCallback @ react-dom.development.js:286
beginWork$1 @ react-dom.development.js:23338
performUnitOfWork @ react-dom.development.js:22292
workLoopSync @ react-dom.development.js:22265
performSyncWorkOnRoot @ react-dom.development.js:21891
scheduleUpdateOnFiber @ react-dom.development.js:21323
updateContainer @ react-dom.development.js:24508
(anonymous) @ react-dom.development.js:24893
unbatchedUpdates @ react-dom.development.js:22038
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24892
render @ react-dom.development.js:24975
(anonymous) @ adminpage?xdm_e=https%3A%2F%2Fjrms.atlassian.net&xdm_c=channel-crewmaker__crewmaker-setup-menu&cp=&xdm_deprecated_addon_key_do_not_use=crewmaker&lic=none&cv=1001.0.0-SNAPSHOT&jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI2MTk2MTc2YmI0M2Q1YjAwNmFhZTA5NzciLCJxc2giOiIzOWRjYTc0MGYyYzQwMjAyOTViNTc3Y2U1N2YwYjM0YzQxOTc5ZTNlZmJkNjNjYjNiOGIzNGI3NDhhZGZiZTRkIiwiaXNzIjoiZmY4ZTMzZDAtNTc0Yi0zM2E0LWExNWMtOGRlODA0ZDUxN2NlIiwiY29udGV4dCI6e30sImV4cCI6MTY0MzAzMjA5NSwiaWF0IjoxNjQzMDMxMTk1fQ.oIBYuWiSy2rkcyE0gNcqYJ-Lqaj9kBqFVgOWh02KAPw:23
AdminPage.js:37 Uncaught (in promise) Error: Cannot find module '../node_modules/@atlaskit/ds-lib/dist/esm/utils/keycodes.js'
at newRequire (AdminPage.js:37:19)
at newRequire (AdminPage.js:21:18)
at localRequire (AdminPage.js:53:14)
at Object.parcelRequire.../node_modules/@atlaskit/ds-lib/dist/esm/hooks/use-close-on-escape-press.js.react (AdminPage.js:27238:17)
at newRequire (AdminPage.js:47:24)
at localRequire (AdminPage.js:53:14)
at Object.parcelRequire.../node_modules/@atlaskit/modal-dialog/dist/esm/modal-wrapper.js.@babel/runtime/helpers/extends (AdminPage.js:29430:53)
at newRequire (AdminPage.js:47:24)
at localRequire (AdminPage.js:53:14)
at Object.parcelRequire.../node_modules/@atlaskit/modal-dialog/dist/esm/index.js../modal-wrapper (AdminPage.js:30107:44)
I compared my package.json versions with the versions from the sandbox for this example and ensured that they are all the same and I even tried to manually install the @atlaskit/ds-lib that it seemingly cannot find but to no avail. I am totally clueless how this might be happening since the example works fine in the code sandbox so I am assuming it has something to do with ACE?
