Atlaskit Editor package throwing errors

Jonnada Kiran May 25, 2020

Hello All,

I am writing a JIRA plugin and for the front end I am using react js. I am trying to use
https://atlaskit.atlassian.com/packages/editor/editor-core 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 answers

1 vote
James Richards
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
May 25, 2022

Hi Team,

This is a response I got from the internal team responsible for the editor-core package.

The latest create-react-app moved to webpack version 5 under the hood, and that version deprecated support for some syntax (named JSON imports) that we use within our editor codebase, which is the the reason for the compilation errors that you're seeing. Your options here could be either to:

  • Downgrade to version 4 of create-react-app. For example by running npx create-react-app@^4.0.0 my-new-app or by updating the react-scripts version in your existing create-react-app project to ^4.0.0 and running npm install.

  • Eject from create-react-app version 5 and modify the webpack configuration. For example, this would let you downgrade the compilation error to a warning by updating strictExportPresence: false in scripts/webpack.config.js (though this might leave lingering issues at runtime).

On our side, our team will begin looking into the work that would be involved to update the JSON import syntax across Atlaskit packages to make this out-of-the-box CRA compatible in future Atlaskit releases. However this may take time, may or may not proceed and we wouldn’t be able to give you a specific timeline for this piece of work at the moment. So our primary suggestion would be to first see if either of the above options help to resolve the issue.

As a note, it's better to post these questions in https://community.developer.atlassian.com/ where we have more technical people who can help.

Regards,
James.

0 votes
Grigorios Charamidis _Appfire_ May 24, 2022

I got similar errors... Do we have any update on that? 

Suggest an answer

Log in or Sign up to answer