Atlaskit Modal-Dialog example won't render

Atlassian Ecosystem Design
, ,
1

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?

2

After clearing package-lock.json, deleting node_modules and reinstalling, the dialog renders as expected now… :man_shrugging:

3

Hello , I’ve tried various troubleshooting steps, such as reinstalling the package, clearing the npm cache, and verifying the file paths, but the issue persists. How can I resolve this error?
Error:
Module not found: Error: Can’t resolve ‘@atlaskit/modal-dialog/dist/types/internal/constants’