Missing "./ckeditor5.css" export in "ckeditor5" package

[nahabi]

Reproduction steps

1. Installed packages
2. Wrote my component

Current behavior

Returns [plugin:vite:import-analysis] Missing "./ckeditor5.css" export in "ckeditor5" package

Expected behavior

For the app to run

Definition of Done

• Please leave this field for us. We will fill it during the backlog refinement session.

Relevant debug data

import { useState, useEffect, useRef } from 'react'
import { CKEditor } from '@ckeditor/ckeditor5-react'

import {
  ClassicEditor,
  AccessibilityHelp,
  Alignment,
  Autoformat,
  AutoLink,
  Autosave,
  Bold,
  Essentials,
  FindAndReplace,
  Heading,
  Indent,
  IndentBlock,
  Italic,
  Link,
  List,
  Paragraph,
  RemoveFormat,
  SelectAll,
  Table,
  TableToolbar,
  TextTransformation,
  Undo
} from 'ckeditor5'

import 'ckeditor5/ckeditor5.css'

Other details

No response

User agent

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

[filipsobol]

Hi @nahabi,

Are you using the latest versions of ckeditor5 (42.0.0) and @ckeditor/ckeditor5-react (8.0.0)? If so, provide a minimal reproduction so we can investigate.

[nahabi]

Please find my dependencies below:

"dependencies": {
    "@chakra-ui/icons": "^2.0.14",
    "@chakra-ui/react": "^2.4.4",
    "@ckeditor/ckeditor5-react": "^8.0.0",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@fontsource/figtree": "^5.0.20",
    "@fontsource/jost": "^4.5.13",
    "@tanstack/react-query": "^4.24.6",
    "@tanstack/react-query-devtools": "^4.24.6",
    "axios": "^1.2.1",
    "axios-hooks": "^4.0.0",
    "ckeditor5": "^42.0.0",
    "date-fns": "^2.29.3",
    "diff": "^5.1.0",
    "dompurify": "^3.1.4",
    "events": "^3.3.0",
    "framer-motion": "^8.0.2",
    "html-react-parser": "^5.1.10",
    "quill": "^2.0.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.41.0",
    "react-icons": "^4.7.1",
    "react-quill": "^2.0.0",
    "react-reconciler": "^0.29.0",
    "react-router-dom": "^6.6.0",
    "uuid": "^9.0.0"
  }

And below is the code for the component:

import { CKEditor } from '@ckeditor/ckeditor5-react'
import {
  ClassicEditor,
  Bold,
  Essentials,
  Heading,
  Indent,
  IndentBlock,
  Italic,
  Link,
  List,
  MediaEmbed,
  Paragraph,
  Table,
  Undo
} from 'ckeditor5'

import 'ckeditor5/ckeditor5.css'

const RichCKEditor = ({ data, setData }) => {
  return (
    <CKEditor
      editor={ClassicEditor}
      data={data}
      onChange={(event, editor) => {
        const data = editor.getData()
        setData(data)
      }}
    />
  )
}

export default RichCKEditor

[Witoso]

Hey, this looks like some problem with a bundler, in a minimal sample it works correctly: https://stackblitz.com/edit/vitejs-vite-kxuglq?file=src%2Fmain.jsx

Please compare to check if you are not missing something in the setup.

[bokute2010]

I have the same issue in nextjs app. Please fix soon.

[Witoso]

@bokute2010 could you please provide some minimal reproducible sample and version details, we tested the Next.js app setup multiple times with new installation methods, and this was not appearing.

[bokute2010]

@Witoso
It happening in next 13, no app route. Does ckeditor support older version of nextjs?