Halo doesn't work in React

[mingcnjs]

I am getting this error when I import Halo. [VANTA] Init error TypeError: Cannot read property 'LinearFilter' of undefined

I tried the following codes.

import React, {useState, useEffect, useRef} from 'react' import * as THREE from 'three' import HALO from 'vanta/dist/vanta.halo.min'

const Vanta = props => { const [vantaEffect, setVantaEffect] = useState(0) const myRef = useRef(null) useEffect(() => { if (!vantaEffect) { setVantaEffect( HALO({ el: myRef.current, THREE: THREE, mouseControls: true, touchControls: true, gyroControls: false, minHeight: 200.0, minWidth: 200.0, }), ) } return () => { if (vantaEffect) vantaEffect.destroy() } }, [vantaEffect]) return

} export default Vanta

How can I resolve this error? [VANTA] Init error TypeError: Cannot read property 'LinearFilter' of undefined

[schmidfelix]

May I ask if you came up with a solution to this problem?

[excalith]

I encountered the very same issue but couldn't find a solution yet. Would love to hear some feedback on this!

[lucacv]

Still same error here.

[excalith]

I managed to solve this issue by loading threejs directly from _app.js. Not the most elegant solution, but seems to be working as intended. Example: https://cancellek.com

I think I have seen this solution on StackOverflow but couldn't find the link, so sharing the snippet.

    useEffect(() => {
        const threeScript = document.createElement("script");
        threeScript.setAttribute("id", "threeScript");
        threeScript.setAttribute(
            "src",
            "https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"
        );
        document.getElementsByTagName("head")[0].appendChild(threeScript);
        return () => {
            if (threeScript) {
                threeScript.remove();
            }
        };
    }, []);