Error: 'Editor' cannot be used as a JSX component

Forge Forge UI Kit and Custom UI
, , , ,
1

Similar to Error when I use @atlaskit/editor-core with Forge Custom UI, I’m trying to use the rich editor with forge and custom UI too, and I’m getting the following typescript error:

'Editor' cannot be used as a JSX component.
  Its type 'typeof Editor' is not a valid JSX element type.
    Type 'typeof Editor' is not assignable to type 'new (props: any) => Component<any, any, any>'.
      Types of construct signatures are incompatible.
        Type 'new (props: EditorProps, context: Context) => Editor' is not assignable to type 'new (props: any) => Component<any, any, any>'.
          Target signature provides too few arguments. Expected 2 or more, but got 1.ts(2786)

Has anyone experienced the same issue?

I did try to revert back to the dependencies that @JarosawWitowski suggested… but without much luck (plus that’s from last year, prob is a better idea to use a more up to date versions)

EDIT:
I managed to fixed that via npm install --force and downgrading to typescript@4.9.5. Now, no typescript errors, but I’m getting this console error when trying to render the editor:

client.ts:28 ReferenceError: process is not defined
    at node_modules/util/util.js (util.js:109:1)
    at __require2 (chunk-5537U2Q2.js?v=302552dc:47:50)
    at node_modules/assert/build/internal/assert/assertion_error.js (assertion_error.js:35:16)
    at __require2 (chunk-5537U2Q2.js?v=302552dc:47:50)
    at node_modules/assert/build/assert.js (assert.js:36:22)
    at __require2 (chunk-5537U2Q2.js?v=302552dc:47:50)
    at actions.js:6:20
warnFailedFetch @ client.ts:28
(anonymous) @ client.ts:333
await in (anonymous) (async)
fetchUpdate @ client.ts:320
(anonymous) @ client.ts:74
handleMessage @ client.ts:72
(anonymous) @ client.ts:45
client.ts:30 [hmr] Failed to reload /src/App.tsx. This could be due to syntax errors or importing non-existent modules. (see errors above)

EDIT 2:
I seem to be getting this error in node_modules/@atlaskit/editor-core/tsconfig.json

Cannot find type definition file for 'prosemirror-state'.
  The file is in the program because:
    Entry point of type library 'prosemirror-state' specified in compilerOptions
2

To whoever might share the same misfortune to end up here looking for answers on using editor-core, * my * conclusion: just don’t.

I gave up. Life’s too short to spend it in a package dependency loop.

Can’t seem to get this working. TBH, I’m a bit surprised how such a ‘core’ thing like an editor, within atlassian (used in many places), has such a fidgety behaviour

Switching to quilljs… I’ll use @atlaskit/editor-jira-transformer for the HTML ↔ ADF transformation :crossed_fingers:

2 Likes
3

Hi, thanks for your idea, but how have you got schema for JIRATransformer?

4

Hi Alex,

I’ve got the idea from here: editor-jira-transformer

You can use these modules:

import { JIRATransformer } from '@atlaskit/editor-jira-transformer';
import { JSONTransformer } from '@atlaskit/editor-json-transformer';
import { defaultSchema } from '@atlaskit/adf-schema/schema-default';

This still gave me lots of headaches to build and actually run, but after some fiddling and many back & forths I manage to get it working.