Error when I use @atlaskit/editor-core with Forge Custom UI

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

Hi,

I am trying to use @atlaskit/editor-core package in Custom UI app. There seem to be complex dependency issue.

  • Created new Forge app with custom UI
  • Used the simplest editor example from docs
  import { Editor } from '@atlaskit/editor-core';

  <Editor appearance="comment" />;

which gives following errors:

Failed to compile.

Should not import the named export 'version' (imported as 'listenerVersion') from default-exporting module (only default export is available soon)
WARNING in ./node_modules/@atlaskit/analytics-next-stable-react-context/dist/esm/context.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/path/to/static/app/node_modules/@atlaskit/analytics-next-stable-react-context/src/context.ts' file: Error: ENOENT: no such file or directory, open '/path/to/static/app/node_modules/@atlaskit/analytics-next-stable-react-context/src/context.ts'

WARNING in ./node_modules/@atlaskit/analytics-next-stable-react-context/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/path/to/static/app/node_modules/@atlaskit/analytics-next-stable-react-context/src/index.ts' file: Error: ENOENT: no such file or directory, open '/Users/nchhantyal/workspace/issue-template/static/admin/node_modules/@atlaskit/analytics-next-stable-react-context/src/index.ts'

ERROR in ./node_modules/@atlaskit/analytics-listeners/dist/esm/atlas/process-event.js 91:21-36
Should not import the named export 'version' (imported as 'listenerVersion') from default-exporting module (only default export is available soon)

ERROR in ./node_modules/@atlaskit/analytics-listeners/dist/esm/atlaskit/process-event.js 85:21-36
Should not import the named export 'version' (imported as 'listenerVersion') from default-exporting module (only default export is available soon)

ERROR in ./node_modules/@atlaskit/analytics-listeners/dist/esm/media/process-event.js 79:23-38
Should not import the named export 'version' (imported as 'listenerVersion') from default-exporting module (only default export is available soon)

ERROR in ./node_modules/@atlaskit/analytics-listeners/dist/esm/navigation/process-event.js 91:21-36
Should not import the named export 'version' (imported as 'listenerVersion') from default-exporting module (only default export is available soon)

ERROR in ./node_modules/@atlaskit/analytics-listeners/dist/esm/notifications/process-event.js 91:21-36
Should not import the named export 'version' (imported as 'listenerVersion') from default-exporting module (only default export is available soon)

ERROR in ./node_modules/@atlaskit/analytics-listeners/dist/esm/peopleTeams/process-event.js 91:21-36
Should not import the named export 'version' (imported as 'listenerVersion') from default-exporting module (only default export is available soon)

Is there any workaround to this issue?

2

Hi @chhantyal !

Could you please provide more details about what Forge app is it ? I will try to reproduce the error and come back to you.

3

Hi @JarosawWitowski It is just Forge hello world app with Custom UI.

I have created a demo app here: Bitbucket

Go to static app and run with react-scripts:

cd static/hello-world
react-scripts start

Looking forward to this issue being fixed.

4

Hi @chhantyal !

Just to let you know that I managed to reproduce it. I am waiting for a response from the team directly responsible for the Editor. I will let you know as soon as I get an answer :slight_smile:

Best regards,
Jaroslaw

1 Like
5

Hi @JarosawWitowski just checking if you have any updates on this. We are currently blocked by this issue.

6

Hi ! @chhantyal
I got response that it may be error with webpack 5. Please try changing default export like following:
from:

import { version as listenerVersion } from '...';

to:

import packageInfo from '...'; 
const listenerVersion = packageInfo.version

Also please remember to build your app first to get rid of errors:

Failed to parse source map from '/path/to/static/app/node_modules/@atlaskit/analytics-next-stable-react-context/src/context.ts' file: Error: ENOENT: no such file or directory, open '/path/to/static/app/node_modules/@atlaskit/analytics-next-stable-react-context/src/context.ts'

Best regards,
Jaroslaw

7

Hi @JarosawWitowski thank you for following up on this.

I am not sure if I understood your workaround. I do not import these packages directly. They are imported somewhere in Atlaskit dependencies, so I cannot change the import.

I tried to build like you suggested but I get same error:

react-scripts build
Creating an optimized production build...
Failed to compile.

Should not import the named export 'version' (imported as 'listenerVersion') from default-exporting module (only default export is available soon)
8

Hi @JarosawWitowski could you please kindly follow up on my last reply? Thanks

9

Hi @chhantyal ! Apologies for making you wait for an answer. The team responsible for the editor is working on a solution to this problem. I will try to speed up the process and get back to you with an answer.

Best regards,
Jaroslaw

10

Hello again @chhantyal
I got answer and the problem is due to incompatible version of react, react-dom, and react-scripts with editor-core. Editor core relies on these versions:

"react": "^16.8.0",
"react-dom": "^16.8.0",

For react-scripts you may need to downgrade as well to a version compatible with the two dependencies above. 4.0.1 worked fine. Working setup:

  "dependencies": {
    "@atlaskit/css-reset": "^6.0.1",
    "@atlaskit/editor-core": "^173.0.1",
    "@forge/bridge": "^2.4.0"
  },
  "devDependencies": {
    "react-scripts": "^4.0.1"
  },

Best regards,
Jaroslaw

11

A post was split to a new topic: Error: ‘Editor’ cannot be used as a JSX component

12

still seeing this error today.