Error: Should not import the named export... in editor-core

Atlassian Developer Tools
, ,
2

Hi @Alejandro1,

I test it by importing the Editor component to my current project, and it works:

image
image1068×426 12.9 KB

Nothing special in code:

import React from 'react';
import ReactDOM from 'react-dom';
import '@atlaskit/css-reset';
import { Editor } from '@atlaskit/editor-core';

ReactDOM.render(
  <div
    style={{
      padding: '45px',
    }}>
    <Editor appearance="comment" />
  </div>,
  document.getElementById('root')
);

Your problem could be related to version conflict, or at least the wrong webpack configuration (from react-scripts ), this is mine (I keep only the dependencies that I think are related to the problem):

{
  "name": "custom-ui",
  "version": "1.0.0",
  "private": true,
  "homepage": ".",
  "dependencies": {
    "@atlaskit/editor-core": "^151.3.0",
    "@atlaskit/media-core": "^32.2.0",
    "@atlaskit/renderer": "^81.1.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-intl": "2.8.0",
    "react-scripts": "4.0.3",
    "styled-components": "^3.2.6"
  }
}

According to my experience with Atlaskit , it has a huge dependence on the version of react , react-scripts , webpack and also its own peer dependencies (between @atlaskit/editor-core and @atlaskit/media-core for example), and it also requires peer dependencies on react-intl and styled-components on the specific version.

Some Atlaskit components are not yet compatible with React 17 and react-scripts 5.x.x. They are still dependent on React 16 and react-scripts 4.x.x.

I did not find any time to test the Editor with React 17 and react-scripts 5, and I would find some time to do it.

Conclusion: I think you could try to downgrade to React 16 and react-scripts 4 if you want to work well with Atlaskit.

Resource: You can also take a look at this repository, and look for the peer dependencies of the component you want to use. This is the peer dependencies of the newest editor-core component (Bitbucket):

"peerDependencies": {
  "@atlaskit/media-core": "^32.2.0",
  "@atlaskit/smart-card": "^17.0.0",
  "react": "^16.8.0",
  "react-dom": "^16.8.0",
  "react-intl": "^2.6.0",
  "react-intl-next": "npm:react-intl@^5.18.1",
  "styled-components": "^3.2.6"
}

I hope it helps

2 Likes