Using Vite instead of Webpack

[lchrennew]

📝 Provide an introduction on How to build from source using Vite.js instead of Webpack.

_My code, which build editor from source, has been migrated to Vue 3+ and Vite.js, and an introduction on How to config the vite.config.js is nessesary, because the editor not works after migration.

---

⚠️ EDIT #2 by @Witoso : New installation methods shipped in v42.0.0 work seamlessly with Vite.

---

⚠️ EDIT by @Reinmar: We shipped an experimental integration for Vite. Read more in https://github.com/ckeditor/ckeditor5/issues/9807#issuecomment-1363284224 🚀

[lchrennew]

any feedback?

[pierre-H]

Any news ? 😃

[brucewar]

waiting...

[pierre-H]

ping @oleq @Reinmar 😃

[lchrennew]

waiting...

[lchrennew]

The current simplest approach: modify and use the build js file @pierre-H @brucewar

[pomek]

Could you describe your problem in more detail? Please include the steps you have already done and the results that have been produced. Also please share your configuration that allows reproducing the issue on our side.

Vite is a new thing that we have never worked on before so the more details you are able to provide, the easier it will be for us to help you.

[lchrennew]

Could you describe your problem in more detail? Please include the steps you have already done and the results that have been produced. Also please share your configuration that allows reproducing the issue on our side.

Vite is a new thing that we have never worked on before so the more details you are able to provide, the easier it will be for us to help you.

More vue developer starts to use Vite.js to replace heavy weight Vue CLI / Webpack, and the following document doesn't help those using Vite.js. https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs-v3.html#configuring-vueconfigjs

[weeblr]

@pomek I am faced with a similar issue as @lchrennew in a different context: I work with svelte instead of vue but the problem is likely the same:

I use Vite for development builds and rollup for production build. Vite allows instant reloading of changed code, it's really hard to not use it.

Actual problem is:

• with official installation and use instructions from CKEditor 5, rollup builds a bundle just fine:

import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

• with the same import, Vite cannot produce a valid bundle and I get a fatal error

The requested module '/node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js' does not provide an export named 'default'

I can make sort of work by using:

    import '@ckeditor/ckeditor5-build-classic'
    const ClassicEditor = window['ClassicEditor']

and now this works in vitejs but of course, it breaks the build by rollup.

I spent quite a bit of time on this and could not find an include method that work for both.

In the end, it's about how vitejs handles commonjs files such as the one you produce for the classic editor bundle (and I'll be posting this at ViteJs github as well) but would be great if there was some guidance from you as to how Vitejs should be configured to properly work with CKEditor.

@lchrennew Apologies for hijacking your issue, please let me know if this is not the problem you described (and also if you found a solution!)

Side note: I could have worked around this by building from source but looks like you really need Webpack for that, find how to configure it, etc and I use rollup. But that's another story.

Best regards

[jsmnbom]

ckeditor5 seems to build fine for me in a pure vite project, with one key exception. I had to add a plugin like below to transform the SVG files properly. It also seems to break in SSR mode, but for me that's not a big deal as I can just exclude it on the server side.

((options) => {
      return {
        name: 'vite-ckeditor-svg-raw-plugin',
        transform(code, id) {
          if (options.fileRegex.test(id)) {
            // eslint-disable-next-line no-param-reassign
            code = fs.readFileSync(id, 'utf8');

            const json = JSON.stringify(code)
              .replace(/\u2028/g, '\\u2028')
              .replace(/\u2029/g, '\\u2029');
            return {
              code: `export default ${json}`,
              map: { mappings: '' },
            };
          }
        },
        generateBundle(_, bundle) {
          for (const [filename, info] of Object.entries(bundle)) {
            if (options.fileRegex.test((info as AssetInfo).name)) {
              delete bundle[filename];
            }
          }
        },
      };
    })({
      fileRegex: /@ckeditor\/.*\.svg/,
    }),

[VanjaPopovic]

I have the same issue The requested module '/node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js' does not provide an export named 'default' using React + Vite

[huydq-itealteam]

I have a same issue. Please push me when it's resolved.

[gap1994]

@jsmnbom I need detail.Please let me see you code.

[nickkrykunov]

Any update for Vue3 + Vite?

[yarduza]

I'm joining the "please update me" list.

[EllipticElysium]

I have the same issue with a react project using vite. this is related to this issue as well - https://github.com/ckeditor/ckeditor5/issues/2178

[EllipticElysium]

after a little bit of googling, i found this package which has worked for me https://www.npmjs.com/package/@originjs/vite-plugin-commonjs

keep the exact same configs you would when using webpack, but add this package and it seems to handle the issues with commonjs

[bigsnowballhehe]

Hello，I have the same issue，it have resolved？？

[Adriman2]

I am also looking forward to a guide on using Vite instead of Webpack. In my case I was planning to implement it to a SvelteKit app, however I decided to use another rich content text editor which integrated nicely. (Tiptap)

Still I'll remain subscribed to this thread, looking forward to a find a solution

[fede-2110]

Hi folks! any new on thiw subject? i'm also struggling with this. Many thanks

[chrismyer]

We would love to see this issue resolved with our React app - trying to switch from Webpack to Vite.

[Barsick132]

I ran into the same problem on Vue2 when trying to build ckeditor5 from source. SVG turned out to be connected based on the above, but styles did not.

[adelapazborrero]

This still remains a problem even today, I am trying to build ckEditor from source using vite, but the docs only have the old vue-cli/webpack settings. Has anyone managed to build and use from source with vite?

[crisjohn02]

Same issue for me

[mfillon]

Hi CKEditor team & community, I'm moving a Vue2 app from Vue-CLI/webpack to Vite, and I'm also having a hard time finding a proper way to configure CKeditor with it, this is the only thing preventing us to complete the migration. With Vite getting more and more popular, and being the new default build tool for Vue, that would be very useful to have a CKEditor plugin or at least a doc explaining how to integrate it.

[rogatty]

I figured out how to use CKEditor 5 in a Vite application. It's not perfect but it works.

I've used https://ckeditor.com/ckeditor-5/online-builder/, put the result in a new (private) repo, ran yarn build and created a release. Then I installed this package in the main app using Github URL. I've added a wrapper component which connects @ckeditor/ckeditor5-vue2 and our editor build. Here is a simplified version without loading state, etc:

<template>
    <ckeditor-vue
        :config="config"
        :editor="editor"
        :value="value"
        @input="$emit('input', $event)"
    />
</template>

<script lang="ts">
import CKEditorVue from '@ckeditor/ckeditor5-vue2';

export default {
    name: 'CkEditor',
    components: {
        ckeditorVue: CKEditorVue.component,
    },
    props: {
        value: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            editor: null,
        };
    },
    computed: {
        config() {
            return {
                ...
            };
        },
    },
    async mounted() {
        const { default: Editor } = await import('ckeditor5-bethink');
        this.editor = Editor;
    },
};
</script>

The main downside is that whenever we need to add or configure a plugin, we have to run the build again and create a new release. It's better than being blocked from using Vite, though 🙂

[ModPhoenix]

I use custom ckeditor build from https://ckeditor.com/ckeditor-5/online-builder/ and i faced with this issue for React.

In my cause its:

"react": "18.2.0", "vite": "2.9.10",

Here is solution what i found:

package.json

"ckeditor5-custom-build": "file:libs/ckeditor5",

vite.config.ts

export default defineConfig(() => {
  return {
    plugins: [react()],
    optimizeDeps: {
      include: ['ckeditor5-custom-build'],
    },
    build: {
      commonjsOptions: { exclude: ['ckeditor5-custom-build'], include: [] },
    },
  };
});

RichTextEditor.tsx

import { CKEditor, CKEditorProps } from '@ckeditor/ckeditor5-react';
import Editor from 'ckeditor5-custom-build';

export function RichTextEditor({
  defaultValue,
  ...props
}: RichTextEditorProps) {
  return (
    <EditorContainer>
      <CKEditor editor={Editor} data={defaultValue || ''} {...props} />
    </EditorContainer>
  );
}

[chaigrb]

I got my custom build from source vue3-vite setup working with the help of @jsmnbom's plugin and ckeditor5-dev-utils.

Start with installing your dependencies... ckeditor5-vue, plugins, and theme then add CKEditor to your main.js

// raw-loader plugin ckeditor-util.js

const fs = require('fs');
const fileRegex = /@ckeditor\/.*\.svg/;
export default () => {
  return {
    name: 'vite-ckeditor-svg-raw-plugin',
    transform(code, id) {
      if (fileRegex.test(id)) {
        // eslint-disable-next-line no-param-reassign
        code = fs.readFileSync(id, 'utf8');
        const json = JSON.stringify(code)
          .replace(/\u2028/g, '\\u2028')
          .replace(/\u2029/g, '\\u2029');
        return {
          code: `export default ${json}`,
          map: { mappings: '' },
        };
      }
    },
    generateBundle(_, bundle) {
      for (const [filename, info] of Object.entries(bundle)) {
        if (fileRegex.test(info.name)) {
          delete bundle[filename];
        }
      }
    },
  };
};

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ckeditorUtil from './src/plugins/ckeditor-util'
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
...
export default defineConfig({
  plugins: [
    vue(),
    ckeditorUtil(),
  ],
  css: {
    postcss: {
      plugins: [
        styles.getPostCssConfig( {
          themeImporter: {
            themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' ),
          },
          minify: true
        } )
      ],
    },
  },
  optimizeDeps: {
    include: [
      // 
      '@ckeditor/ckeditor5-vue',
      ...
    ],
  },
...
})

MyComponent.vue

<template>
  <div class="document-container">
    <ckeditor
      :editor="editor"
      v-model="editorData"
      :config="editorConfig"
      @ready="onReady"
    >
    </ckeditor>
  </div>
</template>

<script setup>
  import DecoupledEditor from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor';
  import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
  import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
  ...
  import { ref } from 'vue';

  const editor = DecoupledEditor;
  const editorConfig = {
    plugins: [
      Alignment,
      Autoformat,
      ...
    ],
    toolbar: {
      items: [
        'heading',
        '|',
        'fontSize',
        'fontFamily',
         ...
       ],
       ...
     },
   };
   // manually add the toolbar
   const onReady = (editor) => {
    // Insert the toolbar before the editable area.
    editor.ui.getEditableElement().parentElement.insertBefore(
      editor.ui.view.toolbar.element,
      editor.ui.getEditableElement()
    );
  };
 const editorData = ref('WORKS');
</script>
<style>
  // editor styles here
</style>

Styling the editor

I didn't use the CKEditorWebpackPlugin because I won't be doing localization for now, but I think you just have to add it as a plugin in vite.config.js

export default defineConfig({
  plugins: [
    vue(),
    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
    vuetify({
      autoImport: true,
    }),
    ckeditorUtil(),
    new CKEditorWebpackPlugin( {
      // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
      language: 'en',

      // Append translations to the file matching the `app` name.
      translationsOutputFile: /app/
    } )
  ],
  ...
})

I hope this can help. And please feel free to correct me if I did something wrong.

[felek000]

I add working custom build ckeditor to quasar (vite). Ugly but works: Any feedback is nice.

in boot file register ckeditor tag in app

import CKEditor from '@ckeditor/ckeditor5-vue';
import {boot} from 'quasar/wrappers'

export default boot(async ({app, router, store}) => {
  app.use(CKEditor).mount('ckeditor')
})

Add app in custom component. Since js build assign to window, I dynamic add src it. To not load component if its not available <ckeditor v-if="editorForCK" v-model="editorData" :editor="editorForCK" :config="editorConfig"/>

const editorData = ref('')
const editorConfig = ref({})
const editorForCK = ref(null)

onMounted(() => {
  const plugin = document.createElement("script");
  plugin.setAttribute(
    "src",
    "/js/ckeditor.js"
  );
  plugin.defer = true;
  document.head.appendChild(plugin);
  console.log('on mounted')
  const interval = setInterval(()=>{
    if(window.ClassicEditor){
      editorForCK.value = window.ClassicEditor
      clearInterval(interval)
    }
  },500)
})

[mfillon]

Thanks for your suggestion @chaigrb . It works, though for the postcss config, it uses @ckeditor/ckeditor5-dev-utils, which has a peer dependency on webpack, even though the part used for postcss config doesn't seem to depend on it. It would be great to not have any webpack dependency.

[EgoistKing]

dosyasını değiştirin ve kullanın

daha detaylı anlatım yapman mümkünmü

[BaptisteKleber]

@ModPhoenix

Thank you soooooooooooooooooooooooo much <3

[adeonir]

I had the same error about ...not provide an export named 'default', but as I'm working on a monorepo, the settings are a bit different:

optimizeDeps: {
  include: ['ckeditor5-custom-build'],
},
build: {
  commonjsOptions: {
    include: [/ckeditor5-custom-build/, /node_modules/],
  },
},

Here are the Vite docs for more info.

[minyoung90]

The "npm run dev" runs well, but is there anyone who can't do the "npm run build"?

I got this message

error during build:
Error: 'default' is not exported by ckeditor5/build/ckeditor.js, ...

I need help! :(

I am using vite + vue3 + ckeditor5 (with custom build)

// vite.config.ts
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    include: ['ckeditor5-custom-build'],
  },
  build: {
    commonjsOptions: { exclude: ['ckeditor5-custom-build'], include: [] },
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

[RaidPRDev]

Also had trouble getting CK Editor running. It worked making builds for dev, but not for production.

The Error:

error during build:
Error: 'default' is not exported by ckeditor5/build/ckeditor.js, ...

The setup:

"vue": "^3.2.41"
"vite": "^3.0.2"
"vue-tsc": "^0.35.0"
"typescript": "^4.5.4"

Ultimately my fix was to npm install -> rollup-plugin-commonjs After that I was able to make production builds.

Instructions

I will try to be thorough as I can on exactly what I did to get it running.
First check this, ( last bullet point === Error: 'default' is not exported by node_modules/vue-runtime-helpers/dist/normalize-component.js ) https://rollup-plugin-vue.vuejs.org/faqs.html

Step1: Install the the following libraries:

npm install rollup-plugin-commonjs --save-dev
npm install @ckeditor/ckeditor5-vue --save-dev

Step 2: Create Custom CK Editor Build

• You will need to go to https://ckeditor.com/ckeditor-5/online-builder/
• Make your build and download.
• In your project root folder, create a folder called "libs", the location/name does not matter.
• In the "libs" folder, create another folder called "ckeditor5"
• Copy the contents of the generated CKEditor build zip file you downloaded.
• Then add it to the package.json; Like so: "ckeditor5-custom-build": "file:libs/ckeditor5",

Step 3: In the vite.config.js

• Add import: import commonjs from 'rollup-plugin-commonjs'
• Then in the defineConfig return:

  plugins: [
  commonjs(),   // add this before vue()
  vue(), 
  ],
  build: {
  commonjsOptions: {
     exclude: [
           'ckeditor5-custom-build', 
     ]
  }
  },
  optimizeDeps: {
    include: [
          'ckeditor5-custom-build',
    ],
  }

Step 4: Finally add the damn thing to your Vue Component

• Add the imports:

  import CKEditor from '@ckeditor/ckeditor5-vue';
  import Editor from 'ckeditor5-custom-build'

• In your template: <CKEditor.component :editor="Editor" v-model="state.formData.body"></CKEditor.component>

Hope this helps someone. Happy coding!

[ron9726]

Also had trouble getting CK Editor running. It worked making builds for dev, but not for production.

The Error:

error during build:
Error: 'default' is not exported by ckeditor5/build/ckeditor.js, ...

The setup:

"vue": "^3.2.41"
"vite": "^3.0.2"
"vue-tsc": "^0.35.0"
"typescript": "^4.5.4"

Ultimately my fix was to npm install -> rollup-plugin-commonjs After that I was able to make production builds.

Instructions

I will try to be thorough as I can on exactly what I did to get it running. First check this, ( last bullet point === Error: 'default' is not exported by node_modules/vue-runtime-helpers/dist/normalize-component.js ) https://rollup-plugin-vue.vuejs.org/faqs.html

Step1: Install the the following libraries:

npm install rollup-plugin-commonjs --save-dev
npm install @ckeditor/ckeditor5-vue --save-dev

Step 2: Create Custom CK Editor Build

• You will need to go to https://ckeditor.com/ckeditor-5/online-builder/
• Make your build and download.
• In your project root folder, create a folder called "libs", the location/name does not matter.
• In the "libs" folder, create another folder called "ckeditor5"
• Copy the contents of the generated CKEditor build zip file you downloaded.
• Then add it to the package.json; Like so: "ckeditor5-custom-build": "file:libs/ckeditor5",

Step 3: In the vite.config.js

• Add import: import commonjs from 'rollup-plugin-commonjs'
• Then in the defineConfig return:

plugins: [
   commonjs(),   // add this before vue()
   vue(), 
],
build: {
   commonjsOptions: {
       exclude: [
             'ckeditor5-custom-build', 
       ]
   }
},
optimizeDeps: {
      include: [
            'ckeditor5-custom-build',
      ],
}

Step 4: Finally add the damn thing to your Vue Component

• Add the imports:

import CKEditor from '@ckeditor/ckeditor5-vue';
import Editor from 'ckeditor5-custom-build'

• In your template: <CKEditor.component :editor="Editor" v-model="state.formData.body"></CKEditor.component>

Hope this helps someone. Happy coding!

in the configuration , you need inlcude the 'ckeditor5-custom-build' in the build.commonjsOptions.include, not exclude.

[RaidPRDev]

"in the configuration , you need inlcude the 'ckeditor5-custom-build' in the build.commonjsOptions.include, not exclude."

In my case that does not work. I'm excluding on purpose, having Vite include the build the 'ckeditor5-custom-build' just does not work right. Whatever the reason is, I'm not sure, but have little time to figure it out atm. Excluding 'ckeditor5-custom-build' works in production builds, tested live and it works fine.

FYI -> If I include 'ckeditor5-custom-build' I get this:

build: {
   commonjsOptions: {
       include: [
             'ckeditor5-custom-build', 
       ]
   }
},

vite v3.0.2 building for production...
transforming (208) src\theme\index.scssUnexpected early exit. This happens when Promises returned by plugins cannot resolve. Unfinished hook action(s) on exit:
(commonjs) load "\u0000vue?commonjs-proxy"
error during build:
Error: Unexpected early exit. This happens when Promises returned by plugins cannot resolve. Unfinished hook action(s) on exit:
(commonjs) load "\u0000vue?commonjs-proxy"
    at EventEmitter.handleEmptyEventLoop (file:///D:/dev/projects/insytive/uakc/build/node_modules/rollup/dist/es/shared/rollup.js:23090:20)
    at Object.onceWrapper (node:events:639:28)
    at EventEmitter.emit (node:events:520:28)
    at process.<anonymous> (file:///D:/dev/projects/insytive/uakc/build/node_modules/rollup/dist/es/shared/rollup.js:23084:55)
    at process.emit (node:events:532:35)

[LukaszGudel]

We started working on a Vite plugin for building CKEditor 5 from source using Vite.

We released the first version of a plugin that will allow building CKEditor 5 in any Vite application. It should work with Vanilla, React, Vue, and Nuxt applications.

NPM: https://www.npmjs.com/package/@ckeditor/vite-plugin-ckeditor5 GitHub: https://github.com/ckeditor/vite-plugin-ckeditor5

Check README.md for instructions on how to use it. You can also refer to Stackblitz sample. More samples and documentation will follow soon.

Using this plugin to build CKEditor 5 from source in Vite is still in the experimental phase. We encourage you to test it and give us feedback. However, there might be some issues in more complex application/usecases, thus using this solution in production applications is not yet recommended.

If you find any issues, please report in here.

---

The plugin mentioned above should be used only when building CKEditor 5 from source in a Vite application. If your editor is already built (e.g you downloaded it from CKEditor 5 Online Builder) then this plugin is not needed and it should work in a Vite application without any additional configuration. If you have issues using the already-built editor, please provide more details and reproduction steps and we will investigate it further.

[mubashirjamali101-claimsmedinc]

It produces following error in browser console:

universalModuleDefinition:1 Uncaught CKEditorError: ckeditor-duplicated-modules
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-ckeditor-duplicated-modules
    at universalModuleDefinition:1:1
    at universalModuleDefinition:1:1
    at universalModuleDefinition:1:1
    at t (universalModuleDefinition:1:1)
    at universalModuleDefinition:1:1

[LukaszGudel]

Hi @mubashirjamali101-claimsmedinc,

could you share reproductions steps or a GitHub repository/stack blitz example with your issue? Please check all versions of ckeditor5 packages in your project, as your issue may be caused by installing packages in different versions. You can read more about the error and possible solutions in our documentation.

[mubashirjamali101-claimsmedinc]

Thanks, I didn't expect any response.

So the scene I am having is very common. Initially we built our project using CRA. And now we have migrated our react app to vite. We are using vanilla js nothing fancy. The issue, can you give me an example of how to use a custom-build of CKEditor 5 (Balloon Toolbar version) in React with Vite. Just an example. I was having build issues with it. But for now I have temporarily solved the problem by CKEditor 5 balloon build from a third-party npm package.

[LukaszGudel]

You can check our React+Vite example here.

We also recently added sections about using an editor built from source with Vite:

• Vanilla: https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/integrating-from-source-vite.html
• Vue: https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/vuejs-v3.html#vite
• React: https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/react.html#vite

[mubashirjamali101-claimsmedinc]

You can check our React+Vite example here.

We also recently added sections about using an editor built from source with Vite:

• Vanilla: https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/integrating-from-source-vite.html
• Vue: https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/vuejs-v3.html#vite
• React: https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/react.html#vite

Thank you, I found this helpful.

[yourjhay]

Having this issue on production when running

yarn build

Using the ckeditor5 online builder codes on React & vite

This is weird but the solution for me was to manually add moment.js

yarn add moment

And finally

yarn build

[valerii15298]

I cannot use table plugin(@ckeditor/ckeditor5-table) with vite setup, having the next error:

1:00:39 AM [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
  Plugin: vite:import-analysis
  File: C:/Users/valer/OneDrive/Desktop/projects/work/ckeditor-vite/node_modules/.vite/deps/chunk-WZXA3Y5G.js?v=cb97e56b:4349:63
  4347|     * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4348|     *)
  4349|    (* @if CK_DEBUG //   /* istanbul ignore next -- @preserve */ *)
     |                                                                ^
  4350|
  4351|  @ckeditor/ckeditor5-table/src/tableclipboard.js:
      at formatError (file:///C:/Users/valer/OneDrive/Desktop/projects/work/ckeditor-vite/node_modules/.pnpm/vite@4.3.1_@types+node@18.15.12/node_modules/vite/dist/node/chunks/dep-24daf00c.js:42591:46)
      at TransformContext.error (file:///C:/Users/valer/OneDrive/Desktop/projects/work/ckeditor-vite/node_modules/.pnpm/vite@4.3.1_@types+node@18.15.12/node_modules/vite/dist/node/chunks/dep-24daf00c.js:42587:19)
      at TransformContext.transform (file:///C:/Users/valer/OneDrive/Desktop/projects/work/ckeditor-vite/node_modules/.pnpm/vite@4.3.1_@types+node@18.15.12/node_modules/vite/dist/node/chunks/dep-24daf00c.js:40437:22)
      at async Object.transform (file:///C:/Users/valer/OneDrive/Desktop/projects/work/ckeditor-vite/node_modules/.pnpm/vite@4.3.1_@types+node@18.15.12/node_modules/vite/dist/node/chunks/dep-24daf00c.js:42865:30)
      at async loadAndTransform (file:///C:/Users/valer/OneDrive/Desktop/projects/work/ckeditor-vite/node_modules/.pnpm/vite@4.3.1_@types+node@18.15.12/node_modules/vite/dist/node/chunks/dep-24daf00c.js:53344:29)

[Witoso]

@valerii15298 apologies for the problem, unfortunately, this is something we broke unintentionally in 37.1.0, the temporal workaround is here: https://github.com/ckeditor/ckeditor5/issues/13922#issuecomment-1516000796.

We are working on the fix.

[ModPhoenix]

I use custom ckeditor build from https://ckeditor.com/ckeditor-5/online-builder/ and i faced with this issue for React.

In my cause its:

"react": "18.2.0", "vite": "2.9.10",

Here is solution what i found:

package.json

"ckeditor5-custom-build": "file:libs/ckeditor5",

vite.config.ts

export default defineConfig(() => {
  return {
    plugins: [react()],
    optimizeDeps: {
      include: ['ckeditor5-custom-build'],
    },
    build: {
      commonjsOptions: { exclude: ['ckeditor5-custom-build'], include: [] },
    },
  };
});

RichTextEditor.tsx

import { CKEditor, CKEditorProps } from '@ckeditor/ckeditor5-react';
import Editor from 'ckeditor5-custom-build';

export function RichTextEditor({
  defaultValue,
  ...props
}: RichTextEditorProps) {
  return (
    <EditorContainer>
      <CKEditor editor={Editor} data={defaultValue || ''} {...props} />
    </EditorContainer>
  );
}

Update for vite 4.4.8:

"vite": "4.4.8",

vite.config.ts

import commonjs from "vite-plugin-commonjs";

export default defineConfig(() => {
  return {
    plugins: [
      react(),
      commonjs({
        filter(id) {
          if (["libs/ckeditor5/build/ckeditor.js"].includes(id)) {
            return true;
          }
        },
      }),
    ],
    optimizeDeps: {
      include: ["ckeditor5-custom-build"],
    },
    build: {
      commonjsOptions: { exclude: ["ckeditor5-custom-build"] },
    },
  };
});

[dim0147]

For those who don't want to touch the confusing config, assign the custom editor to the global window property, and use it in the source code:

• In the custom build source code(run npm run build again after editing):
• In the source code, use it like this:

https://github.com/ckeditor/ckeditor5/issues/9807#issuecomment-949368140 working in dev mode, but when build production it may won't work

[Ahmedelwaafy]

I use custom ckeditor build from https://ckeditor.com/ckeditor-5/online-builder/ and i faced with this issue for React. In my cause its: "react": "18.2.0", "vite": "2.9.10", Here is solution what i found: package.json

"ckeditor5-custom-build": "file:libs/ckeditor5",

vite.config.ts

export default defineConfig(() => {
  return {
    plugins: [react()],
    optimizeDeps: {
      include: ['ckeditor5-custom-build'],
    },
    build: {
      commonjsOptions: { exclude: ['ckeditor5-custom-build'], include: [] },
    },
  };
});

RichTextEditor.tsx

import { CKEditor, CKEditorProps } from '@ckeditor/ckeditor5-react';
import Editor from 'ckeditor5-custom-build';

export function RichTextEditor({
  defaultValue,
  ...props
}: RichTextEditorProps) {
  return (
    <EditorContainer>
      <CKEditor editor={Editor} data={defaultValue || ''} {...props} />
    </EditorContainer>
  );
}

Update for vite 4.4.8:

"vite": "4.4.8",

vite.config.ts

import commonjs from "vite-plugin-commonjs";

export default defineConfig(() => {
  return {
    plugins: [
      react(),
      commonjs({
        filter(id) {
          if (["libs/ckeditor5/build/ckeditor.js"].includes(id)) {
            return true;
          }
        },
      }),
    ],
    optimizeDeps: {
      include: ["ckeditor5-custom-build"],
    },
    build: {
      commonjsOptions: { exclude: ["ckeditor5-custom-build"] },
    },
  };
});

Thank you, this is the only solution that worked with me

[delebash]

The solution for me was in the vite config. For vue vite

Add to your vite config

 optimizeDeps: {
        include: ['ckeditor5-custom-build']
    },
    build: {
        commonjsOptions: {
            exclude: ['ckeditor5-custom-build']
        }
    },

in your vue file

   <ckeditor :editor="editor" v-model="yourmodel" :config="editorConfiguration"></ckeditor>

  import { shallowRef } from 'vue';
   import CKEditor from '@ckeditor/ckeditor5-vue';
    // removing the /build/ckeditor, so you must keep all the content of the online build tool
    import Editor from 'ckeditor5-custom-build';
    const editorConfiguration = {
    };

   const editor = shallowRef(Editor.Editor);
   const ckeditor = shallowRef(CKEditor.component);

Answer from stackoverflow user Gabriel Silva

https://stackoverflow.com/questions/74559310/uncaught-syntaxerror-the-requested-module-ckeditor5-build-ckeditor-js-does-n