40fathoms
40fathoms
PostsComments
TTCTheo's Typesafe Cult
Created by 40fathoms on 6/8/2023 in #questions
CKEditor 5 and Next.js integration - working in development environment but not in production
5 replies
TTCTheo's Typesafe Cult
Created by 40fathoms on 6/8/2023 in #questions
CKEditor 5 and Next.js integration - working in development environment but not in production
5 replies
TTCTheo's Typesafe Cult
Created by 40fathoms on 6/8/2023 in #questions
CKEditor 5 and Next.js integration - working in development environment but not in production
5 replies
TTCTheo's Typesafe Cult
Created by 40fathoms on 6/8/2023 in #questions
CKEditor 5 and Next.js integration - working in development environment but not in production
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!
5 replies
TTCTheo's Typesafe Cult
Created by 40fathoms on 3/4/2023 in #questions
Next.js Hydration error happening only in production.
8 replies
TTCTheo's Typesafe Cult
Created by 40fathoms on 3/4/2023 in #questions
Next.js Hydration error happening only in production.
Thanks for the suggestions! Unfortunately. I also tried running the build locally and the issue didn't happen. The react map-gl was also causing hydration errors months ago when I implemented it, together with the react-countdown. I have both of these components dynamically imported already, with the SSR flag marked as false. However, the issue really seems to be some sort of 3rd party library. Probably an extensive amount of trial and error until I'm able to find which one is causing it.
8 replies
TTCTheo's Typesafe Cult
Created by 40fathoms on 3/4/2023 in #questions
Next.js Hydration error happening only in production.
8 replies
TTCTheo's Typesafe Cult
Created by 40fathoms on 3/4/2023 in #questions
Next.js Hydration error happening only in production.
Unfortunately I can't really show the code, considering it's from the company I work at, but I suspect one of the reasons might be a 3rd party library that could be causing this? I genuinely don't know what could it be. Here are the dependencies of the project:
8 replies