Followed the Quick Start Guide and chose InlineEditor. Also tried ClassicEditor. We are just trying to render a CKEditor to get started.
We get this error:
TypeScript error in C:/Repos/our_project/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? (Note: No minimum TS version is mentioned in CKEditor docs that I could find.)
Dependencies in 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
(Also didn't see a min version for this, except for custom builds, which we aren't doing yet.)
Tried nuking node_modules and reinstalling.
Upgrading TypeScript from 4.1.3 to 4.5.5 resolved the issue! Newer versions worked too, but 4.5.x was the oldest that didn't produce the error.