Reactjs – How to fix "ReferenceError: navigator is not defined during" build

navigator is not defined means that you are bundling the code for server side, which do not have the browser related APIs. You need to bundle this for the client side (that is, for the browser).

The issue is because tinymce do not support ssr (as evident from https://github.com/tinymce/tinymce/issues/3709)

Since you are using Next.js 13 and pages router, change your BundleEditor.jsx to below:

// ** https://www.tiny.cloud/docs/tinymce/6/react-pm-bundle/ **//
import React from 'react';

import { Editor } from '@tinymce/tinymce-react';

if (typeof window !== 'undefined') {
    require('tinymce/tinymce');
    require('tinymce/models/dom/model');
    require('tinymce/themes/silver');
    require('tinymce/icons/default');
    require('tinymce/plugins/advlist');
    require('tinymce/plugins/anchor');
    require('tinymce/plugins/autolink');
    require('tinymce/plugins/autoresize');
    require('tinymce/plugins/autosave');
    require('tinymce/plugins/charmap');
    require('tinymce/plugins/code');
    require('tinymce/plugins/codesample');
    require('tinymce/plugins/directionality');
    require('tinymce/plugins/emoticons');
    require('tinymce/plugins/fullscreen');
    require('tinymce/plugins/help');
    require('tinymce/plugins/image');
    require('tinymce/plugins/importcss');
    require('tinymce/plugins/insertdatetime');
    require('tinymce/plugins/link');
    require('tinymce/plugins/lists');
    require('tinymce/plugins/media');
    require('tinymce/plugins/nonbreaking');
    require('tinymce/plugins/pagebreak');
    require('tinymce/plugins/preview');
    require('tinymce/plugins/quickbars');
    require('tinymce/plugins/save');
    require('tinymce/plugins/searchreplace');
    require('tinymce/plugins/table');
    require('tinymce/plugins/template');
    require('tinymce/plugins/visualblocks');
    require('tinymce/plugins/visualchars');
    require('tinymce/plugins/wordcount');
    require('tinymce/plugins/emoticons/js/emojis')
}

// Editor styles
import 'tinymce/skins/ui/oxide/skin.min.css';

// Content styles, including inline UI like fake cursors
/* eslint import/no-webpack-loader-syntax: off */
// import contentCss from 'tinymce/skins/content/dark/content.css'

import contentCss from '!!raw-loader!tinymce/skins/content/default/content.min.css';
import contentUiCss from '!!raw-loader!tinymce/skins/ui/oxide/content.min.css';

export default function BundledEditor(props) {
    const { init, ...rest } = props;

    // note that skin and content_css is disabled to avoid the normal
    // loading process and is instead loaded as a string via content_style
    return (
        <Editor
            init={{
                ...init,
                skin: false,
                content_css: false,
                content_style: [contentCss, contentUiCss, init?.content_style || ''].join('n'),
            }}
            {...rest}
        />
    );
}

Both npm run dev and npm run build works fine.

$ npm run build

> [email protected] build
> next build

- info Linting and checking validity of types  
- info Creating an optimized production build  
- info Compiled successfully
- info Collecting page data  
- info Generating static pages (4/4)
- info Finalizing page optimization  

Route (pages)                              Size     First Load JS
┌ ○ /                                      3.39 kB        80.3 kB
├   └ css/00a586533d958f8e.css             1.73 kB
├   /_app                                  0 B            76.9 kB
├ ○ /404                                   182 B          77.1 kB
├ λ /api/hello                             0 B            76.9 kB
└ ○ /BundledEditor                         473 kB          550 kB
    └ css/3191dae2698bb014.css             11.8 kB
+ First Load JS shared by all              77.6 kB
  ├ chunks/framework-63157d71ad419e09.js   45.2 kB
  ├ chunks/main-c6c319de9f7d0316.js        29.4 kB
  ├ chunks/pages/_app-5fbdfbcdfb555d2f.js  296 B
  ├ chunks/webpack-1f3c29ac3f0dceed.js     2.06 kB
  └ css/876d048b5dab7c28.css               706 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)