Strapi v5 Compatability

[burakozdemir32]

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/@ckeditor+strapi-plugin-ckeditor@0.0.11_@ckeditor+cked ││ itor5-core@41.3.1_@ckeditor+ckeditor5-e_witlk4ebgabtwjzhyd4665qjgy/node_modules/@ckeditor/strapi-plugin-ckeditor/admin/src/index.js ││ file: /Users/burakozdemir/repos/taxify/web-cms/node_modules/.pnpm/@ckeditor+strapi-plugin-ckeditor@0.0.11_@ckeditor+ckeditor5-core@41.3.1_@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/rollup@4.17.2/node_modules/rollup/dist/es/shared/parseAst.js:394:41) ││ at convertProgram (file:///Users/burakozdemir/repos/taxify/web-cms/node_modules/.pnpm/rollup@4.17.2/node_modules/rollup/dist/es/shared/parseAst.js:1058:26) ││ at parseAst (file:///Users/burakozdemir/repos/taxify/web-cms/node_modules/.pnpm/rollup@4.17.2/node_modules/rollup/dist/es/shared/parseAst.js:2202:12) ││ at tryParse (file:///Users/burakozdemir/repos/taxify/web-cms/node_modules/.pnpm/vite@5.1.6_@types+node@20.12.11/node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:7666:12) ││ at analyzeTopLevelStatements ││ (file:///Users/burakozdemir/repos/taxify/web-cms/node_modules/.pnpm/vite@5.1.6_@types+node@20.12.11/node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:7686:15) ││ at Object.transformAndCheckExports ││ (file:///Users/burakozdemir/repos/taxify/web-cms/node_modules/.pnpm/vite@5.1.6_@types+node@20.12.11/node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:9734:68) ││ at Object.transform ││ (file:///Users/burakozdemir/repos/taxify/web-cms/node_modules/.pnpm/vite@5.1.6_@types+node@20.12.11/node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:9934:41) ││ at file:///Users/burakozdemir/repos/taxify/web-cms/node_modules/.pnpm/rollup@4.17.2/node_modules/rollup/dist/es/shared/node-entry.js:19778:40 ││ │└─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘ strapi:build:  ELIFECYCLE  Command failed with exit code 1.

[Mgsy]

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

[burakozdemir32]

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/@ckeditor+strapi-plugin-ckeditor@0.0.11_@ckeditor+ckeditor5-core@41.4.2_@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/@ckeditor+strapi-plugin-ckeditor@0.0.11_@ckeditor+ckeditor5-core@41.4.2_@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/@ckeditor+strapi-plugin-ckeditor@0.0.11_@ckeditor+ckeditor5-core@41.4.2_@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/@ckeditor+strapi-plugin-ckeditor@0.0.11_@ckeditor+ckeditor5-core@41.4.2_@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/@ckeditor+strapi-plugin-ckeditor@0.0.11_@ckeditor+ckeditor5-core@41.4.2_@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/@ckeditor+strapi-plugin-ckeditor@0.0.11_@ckeditor+ckeditor5-core@41.4.2_@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/@ckeditor+strapi-plugin-ckeditor@0.0.11_@ckeditor+ckeditor5-core@41.4.2_@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/@ckeditor+strapi-plugin-ckeditor@0.0.11_@ckeditor+ckeditor5-core@41.4.2_@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/@ckeditor+strapi-plugin-ckeditor@0.0.11_@ckeditor+ckeditor5-core@41.4.2_@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/@ckeditor+strapi-plugin-ckeditor@0.0.11_@ckeditor+ckeditor5-core@41.4.2_@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/@ckeditor+strapi-plugin-ckeditor@0.0.11_@ckeditor+ckeditor5-core@41.4.2_@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/@ckeditor+strapi-plugin-ckeditor@0.0.11_@ckeditor+ckeditor5-core@41.4.2_@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/@ckeditor+strapi-plugin-ckeditor@0.0.11_@ckeditor+ckeditor5-core@41.4.2_@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/@ckeditor+strapi-plugin-ckeditor@0.0.11_@ckeditor+ckeditor5-core@41.4.2_@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/@ckeditor+strapi-plugin-ckeditor@0.0.11_@ckeditor+ckeditor5-core@41.4.2_@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/esbuild@0.19.12/node_modules/esbuild/lib/main.js:1651:15)
    at /Users/burakozdemir/repos/taxify/web-cms/node_modules/.pnpm/esbuild@0.19.12/node_modules/esbuild/lib/main.js:1059:25
    at /Users/burakozdemir/repos/taxify/web-cms/node_modules/.pnpm/esbuild@0.19.12/node_modules/esbuild/lib/main.js:1527:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

[burakozdemir32]

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

[crup]

@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

[Mgsy]

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.

[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

[NEDDL]

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

[Mgsy]

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