Cannot read properties of undefined (reading 'current'). When trying to import the react three fiber canvas

Question

I keep getting the error: Cannot read properties of undefined (reading 'current'). error image

When attempting to import the React Three Fiber canvas into my live WordPress website as a plugin, I can't seem to find any solutions to fix it. Any suggestions?

index.jsx

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

/**
 * Import the stylesheet for the plugin.
 */
import './style/main.scss';

// Render the App component into the DOM
render(< App />, document.getElementById('root'));

App.jsx

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

function App() {

    return (
        <Canvas>
            <color attach="background" args={['skyblue']} />
        </Canvas>
    )
}

export default App;

package.json dependencies

 "devDependencies": {
    "@wordpress/scripts": "^26.12.0"
  },
  "dependencies": {
    "@react-three/drei": "^9.80.9",
    "@react-three/fiber": "^8.13.7",
    "@types/three": "^0.155.1",
    "three": "^0.156.0"
  }

I've already tried it with some different components that I have, and I didn't encounter any errors when importing one of them. So the problem seems to be in the canvas.

Cannot read properties of undefined (reading 'current'). When trying to import the react three fiber canvas

0 Answers0