React Three Fiber Canvas导入WordPress插件时遇读取current属性未定义错误求助

可能原因与对应解决步骤 #

1. 修复React版本冲突 #

WordPress的@wordpress/element依赖的React版本，可能与@react-three/fiber要求的版本不兼容（R3F高度依赖React Hooks，版本不匹配会导致ref绑定异常）。

• 执行命令查看依赖树，确认版本差异：

  npm ls react react-dom
  

• 若版本不匹配：
  • 降级@react-three/fiber到适配WordPress React版本的分支（比如React 17对应R3F 8.0.x系列）；
  • 或升级@wordpress/scripts到支持目标React版本的最新稳定版（需确认WordPress环境兼容性）。

2. 避免React重复加载 #

WordPress可能已全局加载React，插件打包时若重复包含React，会导致上下文混乱，引发ref错误。

• 在项目根目录创建webpack.config.js，将React设为外部依赖，复用WordPress全局实例：

  const defaultConfig = require('@wordpress/scripts/config/webpack.config');
  
  module.exports = {
      ...defaultConfig,
      externals: {
          react: 'React',
          'react-dom': 'ReactDOM'
      }
  };
  

• 重新打包插件即可。

3. 确保DOM节点就绪后渲染 #

若root节点未完全加载就执行渲染，会导致Canvas无法绑定ref。修改index.jsx：

import App from "./App";
import { render } from '@wordpress/element';
import './style/main.scss';

document.addEventListener('DOMContentLoaded', () => {
    const rootElement = document.getElementById('root');
    if (rootElement) {
        render(<App />, rootElement);
    }
});

4. 对齐Three.js与R3F版本兼容性 #

虽然你的版本看似兼容，但版本微小差异也可能引发初始化问题：

• 修改package.json锁定匹配版本：

  "dependencies": {
      "@react-three/drei": "^9.80.9",
      "@react-three/fiber": "^8.13.7",
      "@types/three": "^0.155.1",
      "three": "~0.155.0"
  }
  

• 执行npm install重新安装依赖。

5. 确保Canvas有明确渲染容器 #

给Canvas包裹带固定宽高的容器，避免因尺寸异常导致初始化失败：

import React from 'react';
import { Canvas } from '@react-three/fiber';

function App() {
    return (
        <div style={{ width: '100%', height: '400px' }}>
            <Canvas>
                <color attach="background" args={['skyblue']} />
            </Canvas>
        </div>
    );
}

export default App;

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