strapi-plugin-ckeditor Strapi v5 Compatability

Hey! It seems the plugin won't be compatible with the new version of Strapi. I've received the following error while testing it out on beta.

strapi:build: [ERROR] There seems to be an unexpected error, try again with --debug for more information strapi:build: strapi:build: ┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐│ ││ RollupError: [commonjs--resolver] Expression expected in /Users/burakozdemir/repos/taxify/web-cms/node_modules/.pnpm/@[email protected]_@ckeditor+cked ││ [email protected]_@ckeditor+ckeditor5-e_witlk4ebgabtwjzhyd4665qjgy/node_modules/@ckeditor/strapi-plugin-ckeditor/admin/src/index.js ││ file: /Users/burakozdemir/repos/taxify/web-cms/node_modules/.pnpm/@[email protected]_@[email protected]_@ckeditor+ckeditor5-e_witlk4ebgab ││ twjzhyd4665qjgy/node_modules/@ckeditor/strapi-plugin-ckeditor/strapi-admin.js:26:10 ││ 24: icon: () => { ││ 25: return ( ││ 26: <IconBox justifyContent="center" alignItems="center" width={ 7 } height={ 6 } hasRadius aria-hidden> ││ ^ ││ 27: <Icon as={ CKEditorIcon } /> ││ 28: </IconBox> ││ at getRollupError (file:///Users/burakozdemir/repos/taxify/web-cms/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:394:41) ││ at convertProgram (file:///Users/burakozdemir/repos/taxify/web-cms/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:1058:26) ││ at parseAst (file:///Users/burakozdemir/repos/taxify/web-cms/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:2202:12) ││ at tryParse (file:///Users/burakozdemir/repos/taxify/web-cms/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:7666:12) ││ at analyzeTopLevelStatements ││ (file:///Users/burakozdemir/repos/taxify/web-cms/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:7686:15) ││ at Object.transformAndCheckExports ││ (file:///Users/burakozdemir/repos/taxify/web-cms/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:9734:68) ││ at Object.transform ││ (file:///Users/burakozdemir/repos/taxify/web-cms/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:9934:41) ││ at file:///Users/burakozdemir/repos/taxify/web-cms/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:19778:40 ││ │└─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘ strapi:build: ELIFECYCLE Command failed with exit code 1.

May 17 '24 09:05 burakozdemir32

Hey @burakozdemir32! Thanks for the report, I will check it.

May 17 '24 10:05 Mgsy

Hey @Mgsy 👋 Thanks for looking into it 🙌 After some digging, the error message has changed a bit:

✘ [ERROR] The JSX syntax extension is not currently enabled

    ../../node_modules/.pnpm/@[email protected]_@[email protected]_@ckeditor+ckeditor5-e_snpklurq764mj2kbmhrnbfgcym/node_modules/@ckeditor/strapi-plugin-ckeditor/admin/src/index.js:26:10:
      26 │           <IconBox justifyContent="center" alignItems="center" width={ 7 } height={ 6 } hasRadius aria-hidden>
         ╵           ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] Could not resolve "@strapi/helper-plugin"

    ../../node_modules/.pnpm/@[email protected]_@[email protected]_@ckeditor+ckeditor5-e_snpklurq764mj2kbmhrnbfgcym/node_modules/@ckeditor/strapi-plugin-ckeditor/admin/src/index.js:1:41:
      1 │ import { prefixPluginTranslations } from '@strapi/helper-plugin';
        ╵                                          ~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@strapi/helper-plugin" as external to exclude it from the bundle, which
  will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@strapi/design-system/Icon"

    ../../node_modules/.pnpm/@[email protected]_@[email protected]_@ckeditor+ckeditor5-e_snpklurq764mj2kbmhrnbfgcym/node_modules/@ckeditor/strapi-plugin-ckeditor/admin/src/index.js:6:21:
      6 │ import { Icon } from '@strapi/design-system/Icon';
        ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@strapi/design-system/Icon" as external to exclude it from the bundle,
  which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@strapi/design-system/Flex"

    ../../node_modules/.pnpm/@[email protected]_@[email protected]_@ckeditor+ckeditor5-e_snpklurq764mj2kbmhrnbfgcym/node_modules/@ckeditor/strapi-plugin-ckeditor/admin/src/index.js:7:21:
      7 │ import { Flex } from '@strapi/design-system/Flex';
        ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@strapi/design-system/Flex" as external to exclude it from the bundle,
  which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] The JSX syntax extension is not currently enabled

    ../../node_modules/.pnpm/@[email protected]_@[email protected]_@ckeditor+ckeditor5-e_snpklurq764mj2kbmhrnbfgcym/node_modules/@ckeditor/strapi-plugin-ckeditor/admin/src/CKEditorIcon.js:4:2:
      4 │   <svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -7 50 37" { ...props }>
        ╵   ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    ../../node_modules/.pnpm/@[email protected]_@[email protected]_@ckeditor+ckeditor5-e_snpklurq764mj2kbmhrnbfgcym/node_modules/@ckeditor/strapi-plugin-ckeditor/admin/src/components/CKEditorInput/index.js:64:4:
      64 │     <Field
         ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] Could not resolve "@strapi/design-system/Stack"

    ../../node_modules/.pnpm/@[email protected]_@[email protected]_@ckeditor+ckeditor5-e_snpklurq764mj2kbmhrnbfgcym/node_modules/@ckeditor/strapi-plugin-ckeditor/admin/src/components/CKEditorInput/index.js:3:22:
      3 │ import { Stack } from '@strapi/design-system/Stack';
        ╵                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@strapi/design-system/Stack" as external to exclude it from the bundle,
  which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@strapi/design-system/Field"

    ../../node_modules/.pnpm/@[email protected]_@[email protected]_@ckeditor+ckeditor5-e_snpklurq764mj2kbmhrnbfgcym/node_modules/@ckeditor/strapi-plugin-ckeditor/admin/src/components/CKEditorInput/index.js:4:57:
      4 │ import { Field, FieldHint, FieldError, FieldLabel } from '@strapi/design-system/Field';
        ╵                                                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@strapi/design-system/Field" as external to exclude it from the bundle,
  which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] The JSX syntax extension is not currently enabled

    ../../node_modules/.pnpm/@[email protected]_@[email protected]_@ckeditor+ckeditor5-e_snpklurq764mj2kbmhrnbfgcym/node_modules/@ckeditor/strapi-plugin-ckeditor/admin/src/components/MediaLib/index.js:24:4:
      24 │     <MediaLibraryDialog onClose={ onToggle } onSelectAssets={ handleSelectAssets } />
         ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] Could not resolve "@strapi/helper-plugin"

    ../../node_modules/.pnpm/@[email protected]_@[email protected]_@ckeditor+ckeditor5-e_snpklurq764mj2kbmhrnbfgcym/node_modules/@ckeditor/strapi-plugin-ckeditor/admin/src/components/MediaLib/index.js:2:56:
      2 │ import { prefixFileUrlWithBackendUrl, useLibrary } from '@strapi/helper-plugin';
        ╵                                                         ~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@strapi/helper-plugin" as external to exclude it from the bundle, which
  will remove this error and leave the unresolved path in the bundle.

1:53:50 PM [vite] error while updating dependencies:
Error: Build failed with 10 errors:
../../node_modules/.pnpm/@[email protected]_@[email protected]_@ckeditor+ckeditor5-e_snpklurq764mj2kbmhrnbfgcym/node_modules/@ckeditor/strapi-plugin-ckeditor/admin/src/CKEditorIcon.js:4:2: ERROR: The JSX syntax extension is not currently enabled
../../node_modules/.pnpm/@[email protected]_@[email protected]_@ckeditor+ckeditor5-e_snpklurq764mj2kbmhrnbfgcym/node_modules/@ckeditor/strapi-plugin-ckeditor/admin/src/components/CKEditorInput/index.js:3:22: ERROR: Could not resolve "@strapi/design-system/Stack"
../../node_modules/.pnpm/@[email protected]_@[email protected]_@ckeditor+ckeditor5-e_snpklurq764mj2kbmhrnbfgcym/node_modules/@ckeditor/strapi-plugin-ckeditor/admin/src/components/CKEditorInput/index.js:4:57: ERROR: Could not resolve "@strapi/design-system/Field"
../../node_modules/.pnpm/@[email protected]_@[email protected]_@ckeditor+ckeditor5-e_snpklurq764mj2kbmhrnbfgcym/node_modules/@ckeditor/strapi-plugin-ckeditor/admin/src/components/CKEditorInput/index.js:64:4: ERROR: The JSX syntax extension is not currently enabled
../../node_modules/.pnpm/@[email protected]_@[email protected]_@ckeditor+ckeditor5-e_snpklurq764mj2kbmhrnbfgcym/node_modules/@ckeditor/strapi-plugin-ckeditor/admin/src/components/MediaLib/index.js:2:56: ERROR: Could not resolve "@strapi/helper-plugin"
...
    at failureErrorWithLog (/Users/burakozdemir/repos/taxify/web-cms/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1651:15)
    at /Users/burakozdemir/repos/taxify/web-cms/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1059:25
    at /Users/burakozdemir/repos/taxify/web-cms/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1527:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

May 17 '24 10:05 burakozdemir32

Hey @Mgsy 👋 Could you give any ETA o this?

May 22 '24 08:05 burakozdemir32

@burakozdemir32 @Mgsy This commit has patches for v5. I was able to add CKeditor as custom field but when I am editing the form I'm getting this error. Not sure what I am missing here.

https://github.com/crup/strapi-plugin-ckeditor/commit/c981d6d7d99196708641c4327de964906475a276

Jul 04 '24 23:07 crup

Thanks, we started preparing the patch that makes the plugin compatible with Strapi 5. However, for now, I can't promise any ETA (especially since Strapi 5 is still in RC). We will handle it before the official release.

Jul 09 '24 09:07 Mgsy

Hi guys, I prepared a PR with Strapi v5 migration. We are going to release the alpha version on npm, however, if you'd like to test it and see if it works for you, you can checkout to the strapi-v5-update branch

PR: #119

Aug 12 '24 10:08 Mgsy

Hi @Mgsy were you able to release the alpha version? I could really use it right now.

Sep 13 '24 11:09 NEDDL

Hello everyone, the migration is done and released - see the release notes to learn more.

Sep 26 '24 09:09 Mgsy