Jql-editor-connect rendering error

[ValterJnior]

Hi there, I was trying to use the recent launched Jql Editor for connect apps with react. This one:

@atlassianlabs/jql-editor-connect

But when I load the component for the first time this error stack is showing:

Any ideas what could be? Looks like the first render is broken.

[ernst.stefan]

It’s probably this error, we’re still waiting on a fix:

Using @atlassianlabs/jql-editor-forge with Webpack v5 in Create React App

I’ve just started using the new @atlassianlabs/jql-editor-forge package in my Custom UI Forge app with Create React App v5 (which uses webpack v5), and thought I’d detail some of the the issues I encountered getting it to build in my project in case they’re useful to anyone else, and to provide feedback Atlassian in the hope that some of these issues can be resolved without the following workarounds. antlr4ts issue Due to this issue in antlr4ts (a dependency of @atlassianlabs/jql-editor), Node…

[joshp]

@ValterJnior would it be possible to post the above error (from the screenshot of your browser console) that the message is referencing?

[ValterJnior]

Hey @joshp I’m not sure if I understood what you’ve asked for, but here you go all the message showing in my console:

The above error occurred in the <Container(jql-editor)> component:
in Container(jql-editor) (created by JQLEditorInner)
in JQLEditorInner (created by InjectIntl(JQLEditorInner))
in InjectIntl(JQLEditorInner)
in ErrorBoundary
in Unknown
in IntlProvider
in Unknown (created by JQLEditorConnectUI)
in JQLEditorConnectUI (created by JQLEditorConnect)
in JQLEditorConnect (at AdvancedFilters.tsx:38)
in div (created by Styled(div))
in Styled(div) (at AdvancedFilters.tsx:28)
in AdvancedFilters (at PrioritiesFilter.tsx:181)
in div (at PrioritiesFilter.tsx:169)
in div (created by Styled(div))
in Styled(div) (at PrioritiesFilter.tsx:164)
in PrioritiesFilter (at PrioritiesTable.tsx:1921)
in div (at PrioritiesTable.tsx:1904)
in Query (at PrioritiesTable.tsx:1882)
in Query (at PrioritiesTable.tsx:1858)
in div (at PrioritiesTable.tsx:1857)
in Query (at PrioritiesTable.tsx:1781)
in div (at PrioritiesTable.tsx:1774)
in PrioritiesTable (created by Context.Consumer)
in ApolloConsumer (created by withApollo(PrioritiesTable))
in withApollo(PrioritiesTable) (created by Mutation)
in Mutation (created by Apollo(withApollo(PrioritiesTable)))
in Apollo(withApollo(PrioritiesTable)) (created by Mutation)
in Mutation (created by Apollo(Apollo(withApollo(PrioritiesTable))))
in Apollo(Apollo(withApollo(PrioritiesTable))) (at Priorities.tsx:62)
in div (at Priorities.tsx:61)
in Priorities (created by Context.Consumer)
in Route (at App.tsx:219)
in div (at App.tsx:218)
in Query (at App.tsx:203)
in Router (created by BrowserRouter)
in BrowserRouter (at App.tsx:202)
in div (at App.tsx:201)
in GeneralDataContextProvider (at App.tsx:200)
in ApolloProvider (at App.tsx:199)
in ThemeProvider (at GlobalTheme.tsx:119)
in GlobalTheme (at App.tsx:197)
in div (at App.tsx:195)
in App (at src/index.tsx:8)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

[joshp]

Hmm, are you able to create a sample project which reproduces the error I can download and look at?

I think this is potentially different to the issues that I was encountering in the other thread.

[ValterJnior]

Hey @joshp I’ll try to do that man! Thanks anyways for your interest and help.

[HelderAlves]

Hey, I managed to make it work here. Turns out the problem was due that the jql-editor depends on prosemirror and some of the jql-editor dependencies also depend on prosemirror (but different versions of it).
Having multiple versions of prosemirror was causing the error.
Adding this to the package.json did the trick:

"resolutions": {
  "prosemirror-model": "1.16.0",
  "prosemirror-state": "1.3.4",
  "prosemirror-transform": "1.3.2",
  "prosemirror-view": "1.23.13"
}

Give it a try