Need Urgent Help with NextJS 14 and Monaco-Editor/React

[bhutoria]

I am using Monaco Editor from @monaco-editor/react library. I am trying to figure out how to make shiki js syntax highlighting work with it. I tried recreating this with react as well thinking that Next was causing some issue.

I keep getting this error while running in dev mode:

at Object.shiki (/Desktop/monaco/.next/server/app/page.js:99:18) at __webpack_require__ (/Desktop/monaco/.next/server/webpack-runtime.js:33:42) at eval (./src/app/page.tsx:7:63) at (ssr)/./src/app/page.tsx (//Desktop/monaco/.next/server/app/page.js:173:1) at Object.__webpack_require__ [as require] (/Desktop/monaco/.next/server/webpack-runtime.js:33:42) at JSON.parse (<anonymous>)

Has anyone found a fix to this? What I have found online is that I need to use a Webpack Plugin but I haven't found any good info as to how to configure it.

my next.config.mjs looks like:

/** @type {import('next').NextConfig} */

const nextConfig = {};

export default nextConfig;

[bhutoria]

Fixed it.

Apologies for the issue creating, was in a rush and desperate for a solution.

In NextJS use dynamic imports for your Editor Component like so:

const EditorComponent = dynamic(
  () => import("/path/to/component"),
  { ssr: false }
);

This will fix the webpack issue. No need to install or modify webpacks.