Next.js执行yarn build因react-plotly.js报self is not defined错误

这个错误是Next.js服务端渲染（SSR/SSG）特性和react-plotly.js的浏览器环境依赖冲突导致的：

• react-plotly.js底层依赖的plotly.js库是纯前端库，内部直接调用了浏览器环境才存在的全局对象self，Node.js服务端运行环境没有这个全局对象
• Next.js执行yarn build时会在服务端预执行页面组件代码生成静态内容，此时加载react-plotly.js就会触发ReferenceError: self is not defined报错
• yarn dev模式下组件大多在客户端侧加载执行，不会触发服务端执行逻辑，因此运行正常

核心思路是让react-plotly.js只在客户端侧加载，服务端构建阶段不引入该组件：

1. 如果你使用的是Next.js Pages Router，用next/dynamic动态导入组件并关闭SSR：
   将原来的直接导入逻辑替换为动态导入：

import dynamic from 'next/dynamic';

// 禁用SSR，该组件只会在客户端加载
const Plot = dynamic(() => import('react-plotly.js'), { ssr: false });

原有Plot组件的调用代码无需修改。

2. 如果你使用的是Next.js 13+ App Router，除了上述动态导入逻辑外，还需要在使用Plot组件的页面/组件文件顶部添加客户端组件标记：

'use client';
import dynamic from 'next/dynamic';

const Plot = dynamic(() => import('react-plotly.js'), { ssr: false });

// 其余组件逻辑不变

修改完成后重新执行yarn build即可正常构建。

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