Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
4,297,437
Community Members
 
Community Events
165
Community Groups

Atlaskit Editor package throwing errors

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

0 votes

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.

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

Suggest an answer

Log in or Sign up to answer
TAGS

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you