ckeditor5.css - Error evaluating function min: incompatible types (React)

[mabis-dev]

📝 Provide detailed reproduction steps (if any)

Hello

Today i installed ckeditor5
https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/react/react.html

But getting a css error "Error evaluating function min: incompatible types"

this is my code

import React, { useEffect, useMemo, useRef, useState } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import {
  ClassicEditor,
  Bold,
  Essentials,
  Italic,
  Mention,
  Paragraph,
  Undo,
  Table,
  TableToolbar,
  TableProperties,
  TableCellProperties
} from 'ckeditor5';
import 'ckeditor5/ckeditor5.css';

const MyComponent= ({
  value,
  onChange,
  disabled,
  controls,
  onBlur,
  handleChange,
  autoFocus,
  contentStyle
}) => {

  return (
    <CKEditor
      editor={ClassicEditor}
      config={{
        toolbar: {
          items: controls
        },
        plugins: [
          Bold,
          Essentials,
          Italic,
          Mention,
          Paragraph,
          Undo,
          Table,
          TableToolbar,
          TableProperties,
          TableCellProperties
        ],
        mention: {
          // Mention configuration
        },
        initialData: { value }
      }}
    />

  );
};

export default MyComponent;

This is my package.json

{
  "name": "reactjs",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.8.3",
    "@babel/core": "^7.7.7",
    "@babel/preset-env": "^7.7.7",
    "@ckeditor/ckeditor5-react": "^9.2.0",
    "@fullcalendar/core": "^5.11.3",
    "@fullcalendar/daygrid": "^5.11.3",
    "@fullcalendar/react": "^5.11.2",
    "@fullcalendar/timegrid": "^5.11.3",
    "@microsoft/signalr": "^3.1.6",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "antd": "^5.17.3",
    "aos": "^3.0.0-beta.6",
    "apexcharts": "^3.41.0",
    "axios": "^0.19.1",
    "babel-plugin-import": "^1.13.0",
    "braft-editor": "^2.3.9",
    "braft-extensions": "^0.1.1",
    "ckeditor5": "^43.1.0",
    "customize-cra": "^0.9.1",
    "dayjs": "^1.11.9",
    "deep-object-diff": "^1.1.0",
    "dotenv": "^8.2.0",
    "echarts": "^5.5.0",
    "echarts-for-react": "^3.0.2",
    "framer-motion": "^11.2.4",
    "history": "^4.10.1",
    "html2canvas": "^1.4.1",
    "jodit-react": "^4.1.2",
    "js-export-excel": "^1.1.2",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "less-vars-to-js": "^1.3.0",
    "lodash": "^4.17.21",
    "pdf-lib": "^1.17.1",
    "postcss-loader": "^8.1.1",
    "postcss-preset-env": "^9.4.0",
    "rc-tween-one": "^3.0.6",
    "react": "^18.3.1",
    "react-apexcharts": "^1.3.7",
    "react-app-rewired": "^2.1.5",
    "react-beautiful-dnd": "^13.0.0",
    "react-circular-progressbar": "^2.1.0",
    "react-diff-viewer": "^3.1.1",
    "react-document-title": "^2.0.3",
    "react-dom": "^18.3.1",
    "react-draggable": "^4.4.6",
    "react-ga": "^3.3.0",
    "react-google-maps": "^9.4.5",
    "react-grid-layout": "^1.3.4",
    "react-icons": "^4.10.1",
    "react-resizable": "^3.0.5",
    "react-responsive": "^8.0.3",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "react-to-pdf": "^1.0.1",
    "recompose": "^0.30.0",
    "uuid": "^3.4.0",
    "webpack": "^5.90.3"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.7.4",
    "@babel/plugin-syntax-dynamic-import": "^7.7.4",
    "autoprefixer": "^10.4.18",
    "clean-webpack-plugin": "^3.0.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.5",
    "jest-enzyme": "^7.1.2",
    "postcss": "^8.4.35",
    "tailwindcss": "^3.4.1",
    "webpack-cli": "^5.1.4"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "webpack": "webpack --mode=development",
    "webpack-production": "webpack --mode=production",
    "hotreload": "webpack --watch --mode=development"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

How can i solve this problem.

[filipsobol]

Stackoverflow tells me that this error comes from Less, which in older versions had its implementation of calc that didn't support mixing different parameter types (e.g., pixels with percentages).

Because native calc() has excellent browser support, I suggest upgrading Less to the latest version (apparently, since version 3 it doesn't override calc()) or configuring your environment so that Less doesn't process CKEditor's styles.

[mabis-dev]

@filipsobol thanks for your comment. Updated less to "less": "^3.13.1". But still same error.

or configuring your environment so that Less doesn't process CKEditor's styles

thanks for suggestion, resolved with this webpack.config

{
          test: /\.less$/,
          use: [
            'style-loader',
            'css-loader',
            'postcss-loader',
            {
              loader: 'less-loader',
              options: {
                modifyVars: themeVariables,
                javascriptEnabled: true
              }
            }
          ]
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader', 'postcss-loader']
        },

[Witoso]

The error relates to min, not calc. Quick googling showed it's suported correctly from less v4.