NextJS使用Pixi-React示例报错：Cannot read properties of null (reading 'stage')

数据老陈

2026-7-1

解决NextJS中pixi-react的"Cannot read properties of null (reading 'stage')"错误

问题根源

你当前的代码存在两个核心问题：

未正确导入pixi-react提供的Stage、Container、Graphics组件，仅导入了底层的PIXI.js库，导致pixi-react的上下文未正确初始化
组件渲染时可能在DOM尚未就绪的阶段就尝试访问PIXI的stage对象

解决步骤

确认依赖安装
确保已安装必要依赖：
```
npm install pixi.js @pixi/react
```

修正组件导入与代码
修改你的Pixi组件，正确导入pixi-react的核心组件：

'use client'
import { useCallback } from 'react';
// 从@pixi/react导入所需组件
import { Stage, Container, Graphics } from '@pixi/react';

const PixiComponent = () => {
  const draw = useCallback((g) => {
    g.clear();
    g.beginFill(0xff3300);
    g.lineStyle(4, 0xffd900, 1);
    g.moveTo(50, 50);
    g.lineTo(250, 50);
    g.lineTo(100, 100);
    g.lineTo(50, 50);
    g.endFill();
    g.lineStyle(2, 0x0000ff, 1);
    g.beginFill(0xff700b, 1);
    g.drawRect(50, 150, 120, 120);
    g.lineStyle(2, 0xff00ff, 1);
    g.beginFill(0xff00bb, 0.25);
    g.drawRoundedRect(150, 100, 300, 100, 15);
    g.endFill();
    g.lineStyle(0);
    g.beginFill(0xffff0b, 0.5);
    g.drawCircle(470, 90, 60);
    g.endFill();
  }, []);

  return (
    <Stage width={600} height={300} options={{ backgroundColor: 0xffffff }}>
      <Container>
        <Graphics draw={draw} />
      </Container>
    </Stage>
  );
};

export default PixiComponent;

简化动态导入（可选）
由于组件已标记'use client'，NextJS 13+会自动将其视为客户端组件，无需额外使用dynamic导入（保留动态导入也不会有问题）。简化后的page.tsx：

import PixiComponent from './components/graphics/Bunny';

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <PixiComponent />
    </main>
  );
}