ReferenceError: navigator is not defined

[batchor]

Describe the bug I'm trying a minimal example of embedding monaco editor into a nextjs project.

After some googling I'm able to write my page.tsx as:

"use client"
import React from "react";
// import dynamic from "next/dynamic";
// const MonacoEditor = dynamic(import("react-monaco-editor"), { ssr: false });
import MonacoEditor from "react-monaco-editor";

export default function App() {
  return (<div>
    <MonacoEditor
        width="800"
        height="600"
        value="asdf"
    />
  </div>)
}

and my next.config.js is:

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

const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");


module.exports = {
    transpilePackages: ['monaco-editor'],
    webpack: config => {
        config.plugins.push(
            new MonacoWebpackPlugin()
        );
        return config;
    }
}

This works well and I do get an editor in my browser. However, there is an error in my server console:

- error node_modules/monaco-editor/esm/vs/base/browser/browser.js (106:18) @ navigator
- error ReferenceError: navigator is not defined
    at __webpack_require__ (/webdata/nextjs-frontend1/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/webdata/nextjs-frontend1/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/webdata/nextjs-frontend1/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/webdata/nextjs-frontend1/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/webdata/nextjs-frontend1/.next/server/webpack-runtime.js:33:42)
    at eval (./app/project/[project_name]/page.tsx:9:77)
    at Object.(ssr)/./app/project/[project_name]/page.tsx (/webdata/nextjs-frontend1/.next/server/app/project/[project_name]/page.js:293:1)
    at __webpack_require__ (/webdata/nextjs-frontend1/.next/server/webpack-runtime.js:33:42)
null
- error node_modules/monaco-editor/esm/vs/base/browser/browser.js (106:18) @ navigator
- error ReferenceError: navigator is not defined
    at __webpack_require__ (/webdata/nextjs-frontend1/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/webdata/nextjs-frontend1/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/webdata/nextjs-frontend1/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/webdata/nextjs-frontend1/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/webdata/nextjs-frontend1/.next/server/webpack-runtime.js:33:42)
    at eval (./app/project/[project_name]/page.tsx:9:77)
    at Object.(ssr)/./app/project/[project_name]/page.tsx (/webdata/nextjs-frontend1/.next/server/app/project/[project_name]/page.js:293:1)
    at __webpack_require__ (/webdata/nextjs-frontend1/.next/server/webpack-runtime.js:33:42)

Though it is working, but I'm still feeling uncomfortable with this error. After googling, I found this https://github.com/vercel/next.js/issues/27006#issuecomment-876287690 saying that I might have to dynamically import react-monaco-editor.

Then I changed the import in page.tsx from

import MonacoEditor from "react-monaco-editor";

to

import dynamic from "next/dynamic";
const MonacoEditor = dynamic(import("react-monaco-editor"), { ssr: false });

After the modification, the error has gone, and so does the code editor: I got a blank white web page without any element.

To Reproduce A minimal nextjs project created by npx create-next-app@latest my-project and then edit next.config.js and page.tsx.

Expected behavior A web editor in the browser without any error messages at server end.

Environment (please complete the following information):

• OS: Ubuntu 22.p4
• Browser: edge
• Bundler: webpack

[marcelovicentegc]

I'm also experiencing a similar issue with Next.js 13 using the app directory. In case I figure things out, I'll leave more information here.

EDIT: I followed the instruction from https://github.com/react-monaco-editor/react-monaco-editor/issues/271#issuecomment-986612363 and noticed that I was passing a JSON object to the Editor's value prop. I'm not sure what made it work but I guess it was the fact that I was not passing a string to the Editor's value prop. All good now.

[xm-c]

Has this problem been solved? I also encountered the same problem.