Vue is not considered as external with ckeditor4-vue3

[SebCorbin]

Reproduction steps (if any)

Using Vite with this config

export default defineConfig({
  plugins: [
    vue(),
  ],
  mode: 'production',
  build: {
    minify: false,
    lib: {
      // what to build
      entry: 'frontend/main.ts',
      formats: ['umd'],
    },
    rollupOptions: {
      // make sure to externalize deps that shouldn't be bundled into library
      external: ['vue', 'vue-i18n'],
      output: {
        // Provide global variables to use in the UMD build for externalized deps
        globals: {
          'vue': 'Vue',
          'vue-i18n': 'VueI18n',
        },
      },
    },
  },
});

The generated bundle is large, very large and I've tracked it down to node_modules/@mayasabha/ckeditor4-vue3/dist/ckeditor.js

This file does not seem to be up-to-date, or is importing the whole Vue framework

Expected result

The production files of ckeditor4-vue3 should not include Vue

[apoorvpal01]

Thanks for bringing this issue up. I am attempting to replicate this issue currently. From what I understand, the build tool should automatically substitute the import { h } from 'vue' with the external Vue library that is loaded. With webpack, there was no unexpected increase in bundle size when this module was used. Nonetheless, I will consult the Vite documentation and confirm whether this can be set in the package.

Meanwhile, could you try the following method of importing the editor into your Vue app and let me know if that makes a difference in the bundle size? You may remove the import form the root file and use the editor in individual Single File Components.

<script setup>
import { ref } from 'vue'
import { component as ckeditor } from '@mayasabha/ckeditor4-vue3'

defineProps({
  msg: String,
})

const count = ref(0)
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
      <ckeditor></ckeditor>
  </div>
</template>

[SebCorbin]

I don't think it is related to Vite or my config, because I copy-pasted your src/ckeditor.js into my project and the build size is now normal.

You should have a look at your generated dist/ckeditor.js file, e.g. https://www.npmjs.com/package/@mayasabha/ckeditor4-vue3?activeTab=code (https://unpkg.com/browse/@mayasabha/ckeditor4-vue3@0.0.7/dist/ckeditor.js) which is 35KB. If you look at its sourcemap, it includes vue bue it should not (you can use a tool like https://sokra.github.io/source-map-visualization/ to see for yourself).

[apoorvpal01]

Thanks for the additional information. It was an issue with the configuration of the bundling tool used while creating the package. It is now fixed with commit ca062fa1ee42703afea701f6a0aef35fa589a65b and the bundled size of ckeditor.js is 4.86KB. This fix is included in release 0.0.8.