Jql-editor-connect rendering error

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

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.


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

1 Like

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

1 Like

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.

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.

1 Like

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

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

1 Like