No matching export in "node_modules/@ckeditor/ckeditor5-ui/src/index.js" for import "Model"

[DrTrevor88]

yarn run v1.22.22
$ vite
Re-optimizing dependencies because lockfile has changed

  VITE v5.4.2  ready in 345 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
X [ERROR] No matching export in "node_modules/@ckeditor/ckeditor5-ui/src/index.js" for import "Model"

    node_modules/@phudak/ckeditor5-emoji/src/ui/emojicharactersnavigationview.js:2:9:
      2 │ import { Model, FormHeaderView, createDropdown, addListToDropdown } from '@ckeditor/ckeditor5-ui';
        ╵          ~~~~~

...node_modules\esbuild\lib\main.js:1472
  let error = new Error(text);
              ^

Error: Build failed with 1 error:
node_modules/@phudak/ckeditor5-emoji/src/ui/emojicharactersnavigationview.js:2:9: ERROR: No matching export in "node_modules/@ckeditor/ckeditor5-ui/src/index.js" for import "Model"
    at failureErrorWithLog (...\node_modules\esbuild\lib\main.js:1472:15)
    at...\node_modules\esbuild\lib\main.js:945:25
    at ...\node_modules\esbuild\lib\main.js:1353:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

Node.js v21.7.3
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[daniel-simplyphp]

+1

[C-Nedelcu]

I am using the New Installation Method of CKE5 with Vite, and encountered multiple build and usage issues.

1) I have resolved this particular error in this thread, by fixing all the 'imports' in the source In every javascript file of the plugin, whenever there is an import related to ckeditor 5, just replace the part after 'from' to 'ckeditor5'. Example: import { Plugin } from 'ckeditor5'; import { Typing } from 'ckeditor5'; All the imports from @ckeditor5 - replace them with just 'ckeditor5'

2) After building, a javascript error about getAttributes etc. This is an issue with the SVG icon You can just open emoji.js; comment out the line: //import emojiIcon from '../theme/icons/emoji-icon.svg';

Then at line 53 insert the SVG contents directly:

        dropdownView.buttonView.set( {
            label: t( 'Emoji' ),
            icon: '<?xml version="1.0" encoding="iso-8859-1"?><!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"     viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g>  <g>     <path d="M437.02,74.98C388.667,26.629,324.38,0,256,0S123.333,26.629,74.98,74.98C26.629,123.333,0,187.62,0,256           s26.629,132.668,74.98,181.02C123.333,485.371,187.62,512,256,512s132.667-26.629,181.02-74.98         C485.371,388.668,512,324.38,512,256S485.371,123.333,437.02,74.98z M256,472c-119.103,0-216-96.897-216-216S136.897,40,256,40          s216,96.897,216,216S375.103,472,256,472z"/> </g></g><g> <g>     <path d="M368.993,285.776c-0.072,0.214-7.298,21.626-25.02,42.393C321.419,354.599,292.628,368,258.4,368          c-34.475,0-64.195-13.561-88.333-40.303c-18.92-20.962-27.272-42.54-27.33-42.691l-37.475,13.99            c0.42,1.122,10.533,27.792,34.013,54.273C171.022,389.074,212.215,408,258.4,408c46.412,0,86.904-19.076,117.099-55.166         c22.318-26.675,31.165-53.55,31.531-54.681L368.993,285.776z"/>   </g></g><g> <g>     <circle cx="168" cy="180.12" r="32"/>   </g></g><g> <g>     <circle cx="344" cy="180.12" r="32"/>   </g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>',
            tooltip: true
        } );

However after fixing these 2 issues I have other javascript errors, unrelated.

Uncaught CKEditorError: characterTitles is not iterable Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-characterTitles is not iterable at Emoji._updateGrid (ckeditor.js:163707:27) at Emoji._createDropdownPanelContent (ckeditor.js:163725:12) at _DropdownView. (ckeditor.js:163661:41) at _DropdownView.fire (ckeditor.js:17070:38) at _DropdownView.set [as isOpen] (ckeditor.js:17328:20) at DropdownButtonView. (ckeditor.js:60900:21) at DropdownButtonView.fire (ckeditor.js:17070:38) at fireDelegatedEvents (ckeditor.js:17266:15) at DropdownButtonView.fire (ckeditor.js:17085:15) at TemplateToBinding. (ckeditor.js:57804:20)

Working on those now...

[C-Nedelcu]

I did not manage to fix that last error so I ended up using: https://github.com/Oteam-io/ckeditor5-emojis

after a bunch of fixes I got that one to work, although it's a bit buggy :)