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

Alejandro1 · January 11, 2022, 1:12pm

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

nhac.tat.nguyen · January 14, 2022, 4:52am

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

Alejandro1 · January 14, 2022, 5:14pm

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

evbo · March 21, 2022, 8:58am

@nhac.tat.nguyen thank you but using the exact dependencies suggested I am still getting the error posted above:

Have you had any luck testing with the latest versions?

jkells · March 25, 2022, 1:58am

What’s causing the issue?

You can import JSON files directly into Javascript files. This is supported by node and by Webpack. In older versions of Webpack you could import either the default export which represents the whole JSON blob or a named export for each top level property in the JSON file.

Using this JSON file as example:

{
  version: 123
}

You could use either:

// 1. Use a named export
import { version } from "./file.json"

OR

// 2. Use the default export
import file from "./file.json;
const { version } = file;

As of Webpack 5 the named export is deprecated which mirrors the behaviour of node.

How can Atlassian fix it?

A bunch of @atlaskit packages have an analytics.js file that loads the current package version from version.json files like this

import { name as packageName, version as packageVersion } from './version.json';

They will need to change them all to:

import versionFile from './version.json';
const { name as packageName, version as packageVersion } = versionFile;

How can you work around it?

These are just warnings. I am able to suppress the warnings with the following in my webpack config:

ignoreWarnings: [
  /only default export is available soon/,
],

create-react-app is turning them into errors, so you might need to eject if you want to workaround the issue.

bogdan · July 1, 2022, 9:57am

Hello! I’ve tried to add the same dependencies as @nhac.tat.nguyen and run the same index.js as you and I get the following error:

./node_modules/@atlaskit/editor-core/dist/esm/plugins/fragment/index.js

Attempted import error: 'fragment' is not exported from '@atlaskit/adf-schema'.

I’ve also tried with the latest version using what @jkells mentioned above and I got stuck with these errors at runtime:

transaction.js:26 Uncaught TypeError: Class constructor Transform cannot be invoked without 'new'
    at new Transaction (transaction.js:26:1)
    at prototypeAccessors$1.tr.get (state.js:162:1)
    at getInitialState (selection-main.js:9:1)
    at SafePlugin.init (plugin-state-factory.js:60:1)
    at Function.create (state.js:187:1)
    at ReactEditorView.createEditorState (ReactEditorView.js:278:1)
    at new ReactEditorView (ReactEditorView.js:650:1)
    at constructClassInstance (react-dom.development.js:12902:1)
    at updateClassComponent (react-dom.development.js:17124:1)
    at beginWork (react-dom.development.js:18653:1)

utils.js:76 Uncaught Error: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.
    at invariant (utils.js:76:1)
    at invariantIntlContext (utils.js:6:1)
    at injectIntl.js:18:1
    at updateContextConsumer (react-dom.development.js:18337:1)
    at beginWork (react-dom.development.js:18694:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1)
    at invokeGuardedCallback (react-dom.development.js:292:1)
    at beginWork$1 (react-dom.development.js:23234:1)
    at performUnitOfWork (react-dom.development.js:22185:1)

ImogenDrews1 · August 19, 2022, 7:37am

Hey! I had a similar issue and it was fixed by using an older version of npm I was using the latest one but when I used v14.16.0 it went away…took me so long to figure that out. Atlaskit is so particular.

DmitriyKhvan · January 24, 2023, 12:13pm

Hello. Can you please send a link to the repository of your project with atlaskit editor (gitlab, github, bitbucket).
My installed packages

Errors come out

QuangNguyn · July 7, 2023, 3:57am

@nhac.tat.nguyen Hello Nhac Tat Nguyen. I’m using @atlaskit/editor-core in Forge app and I got an error.
I would greatly appreciate it if you could provide me with advice regarding this matter.