Reactjs 如何修复ReferenceError：在构建过程中未定义导航器

navigator is not defined意味着您Bundle 了服务器端的代码，而服务器端没有与浏览器相关的API.您需要为客户端(也就是为浏览器)Bundle .

这个问题是因为tinymce不支持SSR(从https://github.com/tinymce/tinymce/issues/3709开始很明显)

由于您使用的是Next.js 13和pages路由，请将您的BundleEditor.jsx更改为以下值:

// ** 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}
        />
    );
}

npm run dev和npm run build都工作得很好.

$ npm run build

> testmce@0.1.0 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)