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?

[filipsobol]

Could you please provide some minimal reproducible sample?

[yilanboy]

I face this problem with vite v2.9.18

➜ npm run build

> build
> vite build

vite v2.9.18 building for production...
✓ 4 modules transformed.
[vite:resolve] Missing "./ckeditor5.css" export in "ckeditor5" package
error during build:
Error: Missing "./ckeditor5.css" export in "ckeditor5" package

Currently, I use relative path to solve this problem.

// Missing "./ckeditor5.css" export in "ckeditor5" package error during build
import 'ckeditor5/ckeditor5.css';
// Pass
import './../../../node_modules/ckeditor5/dist/ckeditor5.css';

In IDE hint, ckeditor5/ckeditor5.css seems correct, but vite can't find the css file.

I found wildcard don't work in vite. there is a issue related to this problem.

  "exports": {

    "...": "..."

    "./ckeditor5.css": "./dist/ckeditor5.css", // add this line can fix the issue
    "./*.css": "./dist/*.css", // but why this line won't wok?

    "...": "..."
  },

[Witoso]

As you mentioned, works in Vite from version v4: https://stackblitz.com/edit/gnj9y8?file=index.html,package.json

@filipsobol wdyt about adding additional explicit export, not sure if this is a proper convention.

[yilanboy]

After update the vite major version, everything works well. Thanks!

[filipsobol]

As you mentioned, works in Vite from version v4: https://stackblitz.com/edit/gnj9y8?file=index.html,package.json

@filipsobol wdyt about adding additional explicit export, not sure if this is a proper convention.

TLDR: The current implementation of wildcards in the exports field has been supported since Webpack 5.13 (~3.5 years), Vite 4.2 (~1.5 years) and esbuild 0.15.10 (~2 years). Webpack 4 completely ignores it, so the old installation methods work fine. We might be able to make ckeditor5 package work with Vite 2 and 3.

---

I have tested the current implementation with Vite in versions 2 (❌), 3 (❌), and 4 (✅). At first, the problem seemed to be related to paths containing the * wildcard (subpath patterns). Unfortunately, we use them for other CSS files and translations, build, and src folders.

{
  ".": {
    "types": "./dist/types/index.d.ts",
    "import": "./dist/ckeditor5.js"
  },
  // ⬇️⬇️⬇️
  "./translations/*.js": {
    "types": "./dist/translations/*.d.ts",
    "import": "./dist/translations/*.js"
  },
  "./*.css": "./dist/*.css",
  "./build/*": "./build/*",
  "./src/*": "./src/*",
  // ⬆️⬆️⬆️
  "./package.json": "./package.json"
}

However, in Vite 2 and 3, I was able to load files from the build and src folders, which may indicate that the problem is related to "pattern trailers" (i.e., paths that contain patterns after the wildcard, example:* vs *.css) that were added to Node later than the wildcards themselves (more info).

This needs more testing, but if this is the case, then changing the exports to what is shown below might add support for older versions of Vite.

{
  ".": {
    "types": "./dist/types/index.d.ts",
    "import": "./dist/ckeditor5.js"
  },
  // ⬇️⬇️⬇️
  "./*": "./dist/*",
  "./browser/*": null,
  // ⬆️⬆️⬆️
  "./build/*": "./build/*",
  "./src/*": "./src/*",
  "./package.json": "./package.json"
}

However, if this doesn't work, then we may need to require Vite 4+, because updating the exports field to include all files would make the package.json file huge.

---

What about webpack 4 and 5?

Wildcard support in the exports field was added 3.5 years ago in webpack 5.13, so we don't need to worry about webpack 5.

Because of this issue, I was worried about webpack 4, which we still support in legacy installation methods. Since exports are exclusive (i.e., paths that are not specified are not accessible), I thought there might be a problem accessing the src or build folder in webpack 4 if the wildcards don't work. Fortunately, this is not the case, as webpack 4 doesn't support the exports field at all, and is able to access all files in the ckeditor5 package as if the exports field were not there.

[filipsobol]

This problem has been fixed in 42.0.2.