TypeScript error in @ckeditor/ckeditor5-basic-styles/src/attributecommand.d.ts

[DeltekDavid]

Not sure if this is a bug. Trying to integrate CKEditor5 TypeScript into our project. No custom build yet, just following the React Quick Start. We get the below error when building:

TypeScript error in C:/Repos/our_repo/node_modules/@ckeditor/ckeditor5-basic-styles/src/attributecommand.d.ts(8,24):
',' expected.  TS1005

     6 |  * @module basic-styles/attributecommand
     7 |  */
  >  8 | import { Command, type Editor } from 'ckeditor5/src/core.js';
       |                        ^
     9 | /**
    10 |  * An extension of the base {@link module:core/command~Command} class, which provides utilities for a command
    11 |  * that toggles a single attribute on a text or an element.

But we are using TypeScript 4.1.3, which should support this syntax? Couldn't find a minimum TS version in the docs.

dependencies from package.json:

{
    "dependencies": {
        "@apollo/client": "3.3.16",
        "@azure/msal-browser": "2.37.1",
        "@ckeditor/ckeditor5-build-inline": "~41.2.0",
        "@ckeditor/ckeditor5-react": "~6.2.0",
        "@date-io/date-fns": "1.3.13",
        "@dnd-kit/core": "~5.0.1",
        "@dnd-kit/sortable": "~6.0.0",
        "@dnd-kit/utilities": "~3.1.0",
        "@material-ui/core": "4.11.3",
        "@material-ui/icons": "4.11.2",
        "@material-ui/lab": "4.0.0-alpha.57",
        "@material-ui/pickers": "3.3.10",
        "@microsoft/applicationinsights-web": "2.5.8",
        "@tanstack/react-table": "8.9.3",
        "@types/file-saver": "2.0.5",
        "@types/react-color": "~3.0.6",
        "@types/text-encoding": "0.0.36",
        "apollo-cache-persist": "0.1.1",
        "date-fns": "2.16.1",
        "draft-convert": "~2.1.12",
        "draft-js": "~0.11.7",
        "export-to-csv": "0.2.1",
        "fast-sort": "2.2.0",
        "file-saver": "2.0.5",
        "filestack-js": "3.18.0",
        "graphql": "15.5.0",
        "leaflet": "1.7.1",
        "lodash.isequal": "4.5.0",
        "lodash.throttle": "4.1.1",
        "material-table": "1.69.3",
        "react": "17.0.2",
        "react-beautiful-dnd": "13.0.0",
        "react-color": "~2.19.3",
        "react-contenteditable": "3.3.5",
        "react-dom": "17.0.2",
        "react-draft-wysiwyg": "~1.14.7",
        "react-draggable": "4.4.3",
        "react-highlight-words": "0.17.0",
        "react-image-gallery": "1.0.8",
        "react-intersection-observer": "~8.32.1",
        "react-number-format": "4.4.1",
        "react-resizable": "2.0.0",
        "react-resize-detector": "5.2.0",
        "react-router-dom": "5.2.0",
        "react-scripts": "3.4.3",
        "react-scroll": "1.8.1",
        "react-slick": "0.27.12",
        "react-sortable-hoc": "2.0.0",
        "react-table": "7.5.2",
        "react-truncate": "2.4.0",
        "react-truncate-markup": "5.0.0",
        "react-virtualized-auto-sizer": "1.0.2",
        "react-virtualized-dnd": "^2.5.1",
        "react-vtree": "2.0.4",
        "react-window": "^1.8.5",
        "react-window-infinite-loader": "1.0.5",
        "sanitize-html": "2.6.1",
        "slick-carousel": "1.8.1",
        "source-map-explorer": "~2.5.3",
        "subscriptions-transport-ws": "0.9.18",
        "usa-state-validator": "~1.0.6",
        "uuid": "8.3.1",
        "xlsx": "0.16.9"
    },
    "devDependencies": {
        "@hot-loader/react-dom": "17.0.2",
        "@testing-library/dom": "7.30.0",
        "@testing-library/react": "9.4.0",
        "@testing-library/react-hooks": "8.0.1",
        "@testing-library/user-event": "13.0.6",
        "@types/draft-convert": "~2.1.4",
        "@types/jest": "26.0.14",
        "@types/jspdf": "1.3.3",
        "@types/lodash.isequal": "4.5.5",
        "@types/lodash.throttle": "4.1.6",
        "@types/node": "14.11.2",
        "@types/popper.js": "1.11.0",
        "@types/react": "16.9.50",
        "@types/react-beautiful-dnd": "13.0.0",
        "@types/react-dom": "16.9.8",
        "@types/react-draft-wysiwyg": "~1.13.4",
        "@types/react-highlight-words": "0.16.2",
        "@types/react-image-gallery": "1.0.0",
        "@types/react-resizable": "1.7.2",
        "@types/react-resize-detector": "5.0.0",
        "@types/react-router-dom": "5.1.5",
        "@types/react-scroll": "1.8.0",
        "@types/react-slick": "0.23.4",
        "@types/react-sortable-hoc": "0.7.1",
        "@types/react-table": "7.0.22",
        "@types/react-test-renderer": "16.9.3",
        "@types/react-truncate": "2.3.3",
        "@types/react-virtualized-auto-sizer": "1.0.0",
        "@types/react-window": "1.8.2",
        "@types/react-window-infinite-loader": "1.0.3",
        "@types/sanitize-html": "1.27.1",
        "@types/uuid": "8.3.0",
        "@types/xlsx": "0.0.36",
        "clsx": "1.1.1",
        "jest-canvas-mock": "2.3.0",
        "jest-junit": "11.1.0",
        "jsdom-worker": "~0.3.0",
        "prettier": "2.1.2",
        "react-app-rewire-hot-loader": "2.0.1",
        "react-app-rewired": "2.1.6",
        "react-hot-loader": "4.13.0",
        "react-test-renderer": "16.13.1",
        "serve": "11.3.2",
        "ts-jest": "27.1.1",
        "typescript": "4.1.3",
        "workbox-cacheable-response": "6.2.0",
        "workbox-core": "6.2.0",
        "workbox-expiration": "6.2.0",
        "workbox-precaching": "6.2.0",
        "workbox-routing": "6.2.0",
        "workbox-strategies": "6.2.0",
        "workbox-webpack-plugin": "6.2.0"
    }
}

Usage in component:

import InlineEditor from '@ckeditor/ckeditor5-build-inline'
import { CKEditor } from '@ckeditor/ckeditor5-react'
//...
<CKEditor
   editor={InlineEditor}
   data={`<p>${articleTitle}</p>`}
/>
//...

Node version: 12.22.12

Tried nuking node_modules and reinstalling.

[DeltekDavid]

Upgrading TypeScript from 4.1.3 to 4.5.5 resolved the issue!

Might I suggest mentioning a minimum TS version in the docs? Would've saved a ton of headache.

[Witoso]

Glad you solved the issue. I'm not sure how to approach this, AFAIK TypeScript is not using SemVer, and we would need to test every version, @filipsobol?

We will rewrite soon the TypeScript page in docs, fyi @godai78 and @gorzelinski to keep this in mind.

[godai78]

What minimal version should we mention, then? 4.5.5?

[filipsobol]

Support for "type modifiers on import names" was added in TypeScript 4.5, but we cannot guarantee that 4.5 will work in all cases as we are using TypeScript 5.0.

AFAIK, we haven't used any TypeScript 5-specific features yet, but there's nothing stopping us from doing so. I think that our recommendation should be to use TypeScript 5.0 or newer.

[godai78]

Sure, thank you!

[godai78]

Added the suggested info in e44b3a8