Theo's Typesafe Cult•2y ago

CKEditor 5 and Next.js integration - working in development environment but not in production

I'm trying to use the CKEditor 5 online builder (https://ckeditor.com/ckeditor-5/online-builder/) in my Next.js application. I downloaded the customized editor file, added it to my application folder, at the same level as

node_modules

node_modules

, then ran the

yarn add file:ckeditor5

yarn add file:ckeditor5

command, as instructed here: https://github.com/ckeditor/ckeditor5/issues/7376#issuecomment-802460193. In development environment, it works perfectly fine. All features are performing according to my needs, and no errors occur. The issue arises when I try to ship this code to production. The

buildspec.yml

buildspec.yml

file has these commands: (image #1) Within the build, the

yarn add file:ckeditor5

yarn add file:ckeditor5

is executed correctly, with no errors. Before the build I also ran the

yarn list ckeditor5-custom-build

yarn list ckeditor5-custom-build

command to check if the package installation had any errors: (image #2) However, during the build, this error occurs: (image #3)

4 Replies

40fathomsOP•2y ago

This is (part of) the code showcasing how my editor is being used:

import { CKEditor } from '@ckeditor/ckeditor5-react'
import Editor from 'ckeditor5-custom-build/build/ckeditor'

// remaining imports / types

export default function CKEditorComponent({
  fillDescription,
  initialValue,
  disabled = false
}: ICKEditorComponent) {

 // rest of my application's code

  return (
      <CKEditor
        editor={Editor}
        onChange={(_event, editor) => {
          const data = editor.getData()
          handleEditorChange(data)
        }}
        onReady={editor => {
          setEditorInstance(editor)
        }}
        disabled={disabled}
        data={initialValue}
        config={{
          mediaEmbed: {
            previewsInData: true
          }
        }}
      />
  )
}

import { CKEditor } from '@ckeditor/ckeditor5-react'
import Editor from 'ckeditor5-custom-build/build/ckeditor'

// remaining imports / types

export default function CKEditorComponent({
  fillDescription,
  initialValue,
  disabled = false
}: ICKEditorComponent) {

 // rest of my application's code

  return (
      <CKEditor
        editor={Editor}
        onChange={(_event, editor) => {
          const data = editor.getData()
          handleEditorChange(data)
        }}
        onReady={editor => {
          setEditorInstance(editor)
        }}
        disabled={disabled}
        data={initialValue}
        config={{
          mediaEmbed: {
            previewsInData: true
          }
        }}
      />
  )
}

In the build logs, the

Module not found

Module not found

error was traced back to the page tsx file importing my component. This is how it is being imported:

import dynamic from 'next/dynamic'
const CKEditorComponent = dynamic(() => import('@source/components/CKEditorComponent'), {
  ssr: false
})

import dynamic from 'next/dynamic'
const CKEditorComponent = dynamic(() => import('@source/components/CKEditorComponent'), {
  ssr: false
})

After some research, I still can't fathom what I'm doing wrong and why this error only occurs when deploying to production, so I'd like to ask for some help regarding this. The application is deployed to AWS. For more details regarding ckeditor integration with next.js, there is this issue here: https://github.com/ckeditor/ckeditor5/issues/7376 Thanks in advance!

40fathomsOP•2y ago

image #1

40fathomsOP•2y ago

image #2

40fathomsOP•2y ago

image #3

Gaming

Programming

CKEditor 5 and Next.js integration - working in development environment but not in production