ckeditor / ckeditor5-react

Official CKEditor 5 React component.
https://ckeditor.com/ckeditor-5
Other
413 stars 98 forks source link

Error: Cannot read properties of undefined (reading 'createContext') #431

Open cassio-gamarra opened 8 months ago

cassio-gamarra commented 8 months ago

image

This errors occurs after build the project. In development time don't happs.

I'm using Vite to build.

My vite.config.ts file:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import tsconfigPaths from 'vite-tsconfig-paths';
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id
              .toString()
              .split('node_modules/')[1]
              .split('/')[0]
              .toString();
          }
        },
      },
    },
  },
});
Witoso commented 8 months ago

You need to use our Vite plugin as well.

cassio-gamarra commented 8 months ago

I add vite plugin e build again: image

Same error: image

Using the editor: image image

My package.json references "react": "^18.2.0" and the build machine is using node v20.9.0.

Witoso commented 7 months ago

As far as I can see, you're using a predefined build, it doesn't require any Vite plugin, as the code is already built in the npm package.

cassio-gamarra commented 7 months ago

Any idea how i fix the reading 'createContext' error?

Witoso commented 7 months ago

I would appreciate it if you could prepare some reproducible code sample for us (repo or zip).

MohamedKarrab commented 2 months ago

Same error here, after building using npm run build vite.config.mjs

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
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"] },
            outDir: 'build',
            rollupOptions: {
                output:{
                    manualChunks(id) {
                        if (id.includes('node_modules')) {
                            return id.toString().split('node_modules/')[1].split('/')[0].toString();
                        }
                    }
                }
            }
        },
    };
});

Though it works fine without the rollupOptions, but I need them. Edit: I fixed this after adding `if (id.includes('commonjsHelpers')) return 'commonjsHelpers' to the manual chunking:

manualChunks(id) {
                        if (id.includes('commonjsHelpers')) return 'commonjsHelpers'
                        if (id.includes('node_modules')) {
                            return id.toString().split('node_modules/')[1].split('/')[0].toString();
                        }
                    }