Next.js 14 build hangs forever with ace-code-editorjs while it works fine with Next.Js 13

Question

Link to the code that reproduces this issue

https://github.com/ats1999/nextjs-14-build-hangs

To Reproduce

1. git clone https://github.com/ats1999/nextjs-14-build-hangs.git
2. cd nextjs-14-build-hangs
3. npm i
4. npm run build

You'll get to see that nextjs build will hang forever.

Current vs. Expected behavior

Currently, i am expecting that it should build nextjs but it is hanging forever.

Environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:04:44 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T8103
Binaries:
  Node: 18.16.1
  npm: 9.5.1
  Yarn: N/A
  pnpm: 8.6.5
Relevant Packages:
  next: 14.0.2
  eslint-config-next: 14.0.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Additional context

The build is hanging with the next 14.0.2 and upper versions but it's working fine with 13.x.x.

I haven’t checked all versions, but the above two versions have been checked.

The build is hanging on the local machine as well as vercel deployment

Although, npm run dev is working fine.

You can just remove <Editor id="editor" /> from app/page.tsx and the build will work fine.

Why is this happening? Although this is not happening while local development, but occurs only when i am running npm run build

// this tool is preventing to build my project. But since there is no error logs on the screen, i couldn’t find any way to fix it. 
const aceToolConfig = {
  class: AceCodeEditorJS,
  config: aceConfig,
};

// EditorJsComponent.tsx 

// @ts-ignore
import AceCodeEditorJS from "ace-code-editorjs";
import "ace-builds/esm-resolver";
// import "../renderers/styles/ace.css";
// @ts-ignore
import EditorJS from "@editorjs/editorjs";
import { useEffect, useRef } from "react";
import dynamic from "next/dynamic";

const aceConfig = {
  languages: {
    plaintext: {
      label: "Plain Text",
      mode: "ace/mode/plain_text",
    },
    html: {
      label: "HTML",
      mode: "ace/mode/html",
    },
    css: {
      label: "CSS",
      mode: "ace/mode/css",
    },
    javascript: {
      label: "JavaScript",
      mode: "ace/mode/javascript",
    },
    java: {
      label: "Java",
      mode: "ace/mode/java",
    },
    cpp: {
      label: "C/C++",
      mode: "ace/mode/c_cpp",
    },
    python: {
      label: "Python",
      mode: "ace/mode/python",
    },
    diff: {
      label: "Diff",
      mode: "ace/mode/diff",
    },
    shell: {
      label: "Shell",
      mode: "ace/mode/sh",
    },
    json: {
      label: "JSON",
      mode: "ace/mode/json",
    },
    sql: {
      label: "SQL",
      mode: "ace/mode/sql",
    },
    tex: {
      label: "TEX",
      mode: "ace/mode/latex",
    },
    markdown: {
      label: "Markdown",
      mode: "ace/mode/markdown",
    },
  },
  options: {
    fontSize: 16,
    minLines: 4,
    theme: "ace/theme/monokai",
    // TODO: configure web worker
    useWorker: false,
  },
};

const aceToolConfig = {
  class: AceCodeEditorJS,
  config: aceConfig,
};

export default function EditorJsComponent({ id }: any) {
  const editorRef = useRef<EditorJS>();
  useEffect(() => {
    if (editorRef.current) {
      return;
    }

    const editor = new EditorJS({
      autofocus: true,
      placeholder: "Let`s write an awesome story!",
      holder: id,
      tools: {
        ace: aceToolConfig,
      },
    });

    editorRef.current = editor;
    (window as any).editor = editor;

    return () => {
      if (editorRef && editorRef.current && editorRef.current.destroy) {
        editorRef.current.destroy();
        delete (window as any).editor;
      }
    };
  }, []);

  return <div id={id} />;
}