ReferenceError: global is not defined

[jechazelle]

Hi,

I follow this guide https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/integrating-from-source-vite.html but I have an error when I click in ckeditor:

ckeditor.tsx:169 ReferenceError: global is not defined

I updated the vite config:

define: {
    // Some libraries use the global object, even though it doesn't exist in the browser.
    // Alternatively, we could add `<script>window.global = window;</script>` to index.html.
    // https://github.com/vitejs/vite/discussions/5912
    global: {},
  },

but after I have an other error:

TypeError: Cannot read properties of undefined (reading '_source')

I have no erro when I import import ClassicEditor from '@ckeditor/ckeditor5-build-classic';.

I created a POC to help debug : https://github.com/jechazelle/ckeditor-poc

ckeditor.ts

import { ClassicEditor as ClassicEditorBase } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { Link } from '@ckeditor/ckeditor5-link';
import { List } from '@ckeditor/ckeditor5-list';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';

export default class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.builtinPlugins = [
    Essentials,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    Heading,
    Link,
    List,
    Paragraph
];

ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
            'heading',
            '|',
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            'blockQuote',
            'undo',
            'redo'
        ]
    },
    language: 'en'
};

packages.json

{
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "devDependencies": {
    "@prettier/plugin-php": "^0.18.9",
    "@tailwindcss/forms": "^0.5.4",
    "@tailwindcss/typography": "^0.5.9",
    "@types/lodash": "^4.14.197",
    "@types/node": "^20.5.0",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "@types/ziggy-js": "^1.3.2",
    "@vitejs/plugin-react": "^2.2.0",
    "autoprefixer": "^10.4.15",
    "axios": "^0.26.1",
    "laravel-vite-plugin": "^0.7.8",
    "postcss": "^8.4.27",
    "prettier": "^2.8.8",
    "tailwindcss": "^3.3.3",
    "typescript": "^4.9.5",
    "vite": "^3.2.7"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-autoformat": "^39.0.1",
    "@ckeditor/ckeditor5-basic-styles": "^39.0.1",
    "@ckeditor/ckeditor5-block-quote": "^39.0.1",
    "@ckeditor/ckeditor5-build-classic": "^39.0.1",
    "@ckeditor/ckeditor5-editor-classic": "^39.0.1",
    "@ckeditor/ckeditor5-essentials": "^39.0.1",
    "@ckeditor/ckeditor5-heading": "^39.0.1",
    "@ckeditor/ckeditor5-link": "^39.0.1",
    "@ckeditor/ckeditor5-list": "^39.0.1",
    "@ckeditor/ckeditor5-paragraph": "^39.0.1",
    "@ckeditor/ckeditor5-react": "^6.1.0",
    "@ckeditor/ckeditor5-theme-lark": "^39.0.1",
    "@ckeditor/vite-plugin-ckeditor5": "^0.1.3",
    "@headlessui/react": "^1.7.16",
    "@inertiajs/core": "^1.0.10",
    "@inertiajs/react": "^1.0.10",
    "classnames": "^2.3.2",
    "lodash": "^4.17.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "ziggy-js": "^1.6.1"
  },
  "prettier": {
    "semi": true,
    "singleQuote": true,
    "useTabs": false,
    "tabWidth": 2,
    "trailingComma": "all",
    "printWidth": 80,
    "arrowParens": "avoid"
  }
}

versions:

• node v18.16.0
• npm v9.8.1

[LukaszGudel]

Hi @jechazelle,

I can confirm the issue. It is related to an issue in the main ckeditor5 repo: ckeditor/ckeditor5#14173.

The issue needs to be fixed in the CKEditor 5 packages, and until the proper fix is implemented and released, you can fall back to the 38.1.1 packages of CKEditor 5 that are not affected by this issue when using the editor in Vite applications.

[filipsobol]

Fix is merged and will be available in the next release.