Next.js接入mxgraph报ReferenceError: navigator is not defined如何解决

报错原因 #

你遇到的navigator is not defined报错是Next.js服务端渲染（SSR）的典型问题：mxgraph这类前端图形库强依赖浏览器端专属API（navigator/window/document等），但Next.js在服务端预渲染页面时没有这类浏览器全局对象，直接初始化就会抛出引用错误。

通用解决方法 #

这类未做服务端兼容、强依赖浏览器API的第三方库的报错，有三类通用解决方案，覆盖绝大多数场景：

• 方案1：使用Next.js动态导入能力，强制依赖库只在客户端加载（最推荐，对业务代码侵入最小）
  Pages Router版本示例：
  首先把用到mxgraph的逻辑封装为独立组件MxGraphComponent.jsx，然后在父组件中动态引入该组件，关闭SSR：

  import dynamic from 'next/dynamic'
  
  // 完全禁用该组件的服务端渲染，仅在客户端加载
  const MxGraphComponent = dynamic(() => import('../components/MxGraphComponent'), {
    ssr: false,
    loading: () => <p>加载流程图中...</p>
  })
  
  // 父组件正常使用即可
  export default function Home() {
    return <MxGraphComponent />
  }
  

  App Router版本示例：
  首先在MxGraphComponent.jsx顶部添加客户端标记，再正常初始化mxgraph：

  'use client'
  import { useEffect } from 'react'
  import mx from "mxgraph"
  
  export default function MxGraphComponent() {
    useEffect(() => {
      // 客户端挂载后才初始化mxgraph
      const mxgraph = mx({
        mxBasePath: "/assets/mxgraph",
      })
      // 后续画图逻辑写在这里
    }, [])
  
    return <div id="mxgraph-container"></div>
  }
  

• 方案2：执行初始化前判断运行环境，仅在客户端执行初始化逻辑
  不需要拆分组件，直接把初始化逻辑包裹在浏览器环境判断语句中：

  import { useEffect } from 'react'
  import mx from "mxgraph"
  
  export default function Home() {
    useEffect(() => {
      // 只有浏览器环境下才执行初始化
      if (typeof window !== 'undefined') {
        const mxgraph = mx({
          mxBasePath: "/assets/mxgraph",
        })
        // 后续逻辑
      }
    }, [])
  
    return <div id="mxgraph-container"></div>
  }
  

• 方案3：在next.config.js中配置externals，忽略服务端对这类浏览器库的打包
  仅当你需要全局处理大量同类依赖时使用，针对性不如前两个方案：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    webpack: (config, { isServer }) => {
      if (isServer) {
        config.externals.push('mxgraph')
      }
      return config
    }
  }
  
  module.exports = nextConfig
  

内容的提问来源于stack exchange，提问作者loone96