index.es.js:525 Uncaught TypeError: Class constructor Transform cannot be invoked without 'new'
at new Transaction (index.es.js:525:1)
at ./node_modules/prosemirror-state/dist/index.es.js.prototypeAccessors$1.tr.get (index.es.js:875:44)
at index.js:521:1
at dispatch (bind-actions.js:24:1)
at index.js:435:1
at dispatch (bind-actions.js:24:1)
at index.js:963:1
at dispatch (bind-actions.js:24:1)
at Object.onInit (bind-actions.js:41:1)
at Container.triggerContainerAction (container.js:67:1)
The above error occurred in the <Container(jql-editor)> component:
in Container(jql-editor) (created by JQLEditorInner)
in JQLEditorInner (created by Context.Consumer)
in injectIntl(JQLEditorInner) (created by Lazy(Component))
in Lazy(Component)
in Suspense (created by LazySuspense)
in LazySuspense
in Unknown
in ErrorBoundary
in Unknown
in IntlProvider
in Unknown (created by MyJQLEditor)
in MyJQLEditor
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
Hello @termit7000 apologies for this error you are facing. I believe this is the same issue documented here: JQLEditorConnect render error. Where there are incompatible versions being installed of the prosemirror-transform dependency.
If you specify a fixed version in your package.json, e.g. "prosemirror-transform": "1.3.2", I believe that will fix the issue.
In the meantime we’ll look to update the package to prevent this issue from recurring.
Thanks for your patience. The internal jql-editor dependencies have been updated to help mitigate this issue.
It’s still possible to run into this problem if your app bundles incompatible versions of prosemirror dependencies but npm install should now work out of the box when adding @atlassianlabs/jql-editor-forge or jql-editor-connect as a fresh dependency to your app.
Hey @ajay the pre-configured forge and connect packages are designed specifically to work with the Cloud REST API.
The package itself is a thin wrapper on top of @atlassianlabs/jql-editor - npm which implements callbacks to fetch autocomplete data, so you could leverage this package directly and call the appropriate Server/DC API’s to fetch this data (see API docs).
Thanks for the pointer…we were able to modify the code and get a 200 ok response… but somehow the Editor is greyed out without any errors in the console… Any clue?
@ajay In most cases there won’t be any noticeable difference, the async component is provided as an optimisation for experiences that may not need to render the editor in the critical path.
There are no known issues with rendering the async component so this would need further debugging. We use react-loosely-lazy under the hood so it’s possible there are some critical missing steps in your build configuration, see tooling docs.
One more query on the '@atlassianlabs/jql-editor' usage in DC
The Jira shortcut keys are not getting disabled when using the editor input.
Example if I type 'Project = ’ , the C entry is causing the issue create modal to be opened up. Anyway to disable the shortcut-keys when using the editor?
Hey @ajay this seems like a bug in the DC’s global shortcut key handler not ignoring key presses from contenteditable regions. You can raise a public support request on https://getsupport.atlassian.com/ to try and get this issue triaged. Alternatively you may be able to add a click event handler to your app and stopPropagation of the event when it’s originating from the JQL editor.
You can prevent the event propagation using the below code snippet
useEffect(() => {
const handleKeyEvent = (event) => {
event.stopPropagation(); // Stop the event from propagating further
};
// Attempt to find the contenteditable div within the JQLEditor after it has been rendered
const editableDiv = document.querySelector('div[contenteditable="true"]');
// If the div is found, attach the event listener
if (editableDiv) {
editableDiv.addEventListener('keypress', handleKeyEvent);
}
return () => {
// Ensure to remove the event listener on cleanup to prevent memory leaks
if (editableDiv) {
editableDiv.removeEventListener('keypress', handleKeyEvent);
}
};
}, []);
Hey @Kyle, we were earlier using the same approach as Ajay, ( JQLEditorAsync ) we also faced the issue of disabled component then we tried to change it to the Sync Component i.e JQLEditor, but in log, it is showing process is not defined, can you please help us out in regards to this issue, sharing some of the details as below:
jql-editor version : “^2.0.1”
node version : 18.17.1
Error : ReferenceError: process is not defined
Hey @gauravs you’d need to look into the stack trace to narrow down where this is originating from. I can’t provide much more insight from the error message alone unfortunately.
