Atlaskit Editor package throwing errors

Jira Development Jira Server
, ,
1

Hello All,

I am writing a JIRA plugin and for the front end I am using react js. I am trying to use
Atlaskit by Atlassian for Rich Text Field.

I am getting following errors and my components are not rendering

editor.js:213 Uncaught TypeError: create_editor_1.getUiComponent is not a function
at Editor.render (editor.js:213)
at finishClassComponent (react-dom.development.js:18470)
at updateClassComponent (react-dom.development.js:18423)
at beginWork$1 (react-dom.development.js:20186)
at HTMLUnknownElement.callCallback (react-dom.development.js:336)
at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
at invokeGuardedCallback (react-dom.development.js:440)
at beginWork$$1 (react-dom.development.js:25780)
at performUnitOfWork (react-dom.development.js:24695)
at workLoopSync (react-dom.development.js:24671)
Editor.render @ editor.js:213
finishClassComponent @ react-dom.development.js:18470
updateClassComponent @ react-dom.development.js:18423
beginWork$1 @ react-dom.development.js:20186
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
beginWork$$1 @ react-dom.development.js:25780
performUnitOfWork @ react-dom.development.js:24695
workLoopSync @ react-dom.development.js:24671
performSyncWorkOnRoot @ react-dom.development.js:24270
scheduleUpdateOnFiber @ react-dom.development.js:23698
updateContainer @ react-dom.development.js:27103
eval @ react-dom.development.js:27528
unbatchedUpdates @ react-dom.development.js:24433
legacyRenderSubtreeIntoContainer @ react-dom.development.js:27527
render @ react-dom.development.js:27608
window.onload @ SmartJiraBanner.js:15
load (async)
eval @ SmartJiraBanner.js:14
./js/SmartJiraBanner.js @ bundle.my-feature.js?locale=en-US:39935
webpack_require @ bundle.my-feature.js?locale=en-US:64
(anonymous) @ bundle.my-feature.js?locale=en-US:166
(anonymous) @ bundle.my-feature.js?locale=en-US:169
react_devtools_backend.js:6 The above error occurred in the component:
in Editor (created by AddAnnouncement)
in div (created by AddAnnouncement)
in AddAnnouncement (created by App)
in div (created by App)
in App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
r @ react_devtools_backend.js:6
logCapturedError @ react-dom.development.js:21843
logError @ react-dom.development.js:21880
update.callback @ react-dom.development.js:23232
callCallback @ react-dom.development.js:13829
commitUpdateEffects @ react-dom.development.js:13867
commitUpdateQueue @ react-dom.development.js:13857
commitLifeCycles @ react-dom.development.js:22160
commitLayoutEffects @ react-dom.development.js:25344
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
commitRootImpl @ react-dom.development.js:25082
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
commitRoot @ react-dom.development.js:24922
finishSyncRender @ react-dom.development.js:24329
performSyncWorkOnRoot @ react-dom.development.js:24307
scheduleUpdateOnFiber @ react-dom.development.js:23698
updateContainer @ react-dom.development.js:27103
eval @ react-dom.development.js:27528
unbatchedUpdates @ react-dom.development.js:24433
legacyRenderSubtreeIntoContainer @ react-dom.development.js:27527
render @ react-dom.development.js:27608
window.onload @ SmartJiraBanner.js:15
load (async)
eval @ SmartJiraBanner.js:14
./js/SmartJiraBanner.js @ bundle.my-feature.js?locale=en-US:39935
webpack_require @ bundle.my-feature.js?locale=en-US:64
(anonymous) @ bundle.my-feature.js?locale=en-US:166
(anonymous) @ bundle.my-feature.js?locale=en-US:169
react-dom.development.js:25206 Uncaught TypeError: create_editor_1.getUiComponent is not a function
at Editor.render (editor.js:213)
at finishClassComponent (react-dom.development.js:18470)
at updateClassComponent (react-dom.development.js:18423)
at beginWork$1 (react-dom.development.js:20186)
at HTMLUnknownElement.callCallback (react-dom.development.js:336)
at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
at invokeGuardedCallback (react-dom.development.js:440)
at beginWork$$1 (react-dom.development.js:25780)
at performUnitOfWork (react-dom.development.js:24695)
at workLoopSync (react-dom.development.js:24671)

Any help is much appreciated.

Thank You,
Kiran

2

hi
it seems complaining that getUiComponent can’t be found, it should be available with @atlaskit/editor-core package.
I can see it was introduced quite long ago in version 56.2.2 (about 3 years ago), latest is 117.0.2.
Can you please confirm that you did npm install that module (@atlaskit/editor-core) and its dependencies, and which version you used?

3

Hi Pavlo,

I am using v123.0.3. Yes I did “yarn install” and I can see that folder in my node modules.

image

Thanks,
Kiran

4

hi Kiran,

I have set up a basic editor example with no props on stackblitz:
link to a project setup
link to the test page

You can try to use that as a reference and check the project dependencies, you should be able to fork it or download.
Hope that helps.

5

Hi Pavlo,

I replicated your example in my JIRA plugin. I am still getting the same error.

Thank You,
Kiran