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

Hi,
I’m trying to use @atlaskit/editor-core for the first time.
I installed it with npm i @atlaskit/editor-core, my npm version is 8.3.0 and my node version is 16.13.1.

However, when I try to run my app, I get many errors with same pattern:

ERROR in ./node_modules/@atlaskit/editor-core/dist/esm/plugins/feedback-dialog/index.js 95:183-1
Should not import the named export 'version' (imported as 'coreVersion') from default-exporting lt export is available soon)
ERROR in ./node_modules/@atlaskit/status/dist/esm/components/analytics.js 53:43-54
Should not import the named export 'name' (imported as 'packageName') from default-exporting module (only default 
export is available soon)
ERROR in ./node_modules/@atlaskit/analytics-listeners/dist/esm/atlaskit/process-event.js 97:21-3
Should not import the named export 'version' (imported as 'listenerVersion') from default-exportefault export is available soon)
ERROR in ./node_modules/@atlaskit/editor-common/dist/esm/ui/LegacyToNextIntlProvider/index.js 11
export 'intlShape' (imported as 'intlShape') was not found in 'react-intl'

and others similar.

My package.json contains this dependencies:

"dependencies": {
        "@atlaskit/editor-core": "^153.1.2",
        "@atlaskit/media-core": "^32.2.0",
        "@emotion/react": "^11.7.1",
        "@emotion/styled": "^11.6.0",
        "@mui/icons-material": "^5.2.5",
        "@mui/material": "^5.2.7",
        "@testing-library/jest-dom": "^5.16.1",
        "@testing-library/react": "^11.2.7",
        "@testing-library/user-event": "^12.8.3",
        "emoji-picker-react": "^3.5.0",
        "firebase": "^9.6.1",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-google-button": "^0.7.2",
        "react-intl": "^5.24.2",
        "react-mde": "^11.5.0",
        "react-redux": "^7.2.6",
        "react-router-dom": "^6.2.1",
        "react-scripts": "5.0.0",
        "redux": "^4.1.2",
        "redux-thunk": "^2.4.1",
        "sass": "^1.47.0",
        "showdown": "^1.9.1",
        "simplemde": "^1.11.2",
        "styled-components": "^3.2",
        "web-vitals": "^0.2.4",
        "workbox-background-sync": "^5.1.4",
        "workbox-broadcast-update": "^5.1.4",
        "workbox-cacheable-response": "^5.1.4",
        "workbox-core": "^5.1.4",
        "workbox-expiration": "^5.1.4",
        "workbox-google-analytics": "^5.1.4",
        "workbox-navigation-preload": "^5.1.4",
        "workbox-precaching": "^5.1.4",
        "workbox-range-requests": "^5.1.4",
        "workbox-routing": "^5.1.4",
        "workbox-strategies": "^5.1.4",
        "workbox-streams": "^5.1.4"
    },

Thank you very much for your time

Hi @Alejandro1,

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

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

Thank you so much, I downgraded using your package as reference and now those errors doesn’t display, so looks like it is really a dependency problem

1 Like