React Three Fiber about webgl-fluid

[cloydlau]

Hello, this project is vanilla, there's no way preventing you from using it in any framework.

[cloydlau]

1. It's a common error in SSR project, you should make sure to load the library when window is avaliable.
2. Only minimal reproduction is acceptable, you should make sure it's not caused by your own codes, thanks.

[PercyMichael]

i am getting an error

when using it in this code , this is nextjs alone without react three fiber

import React from "react";
import WebGLFluid from "webgl-fluid";

const index = () => {
WebGLFluid(document.querySelector("canvas"), {
// options
});
return ;
};

export default index;

You can aslo see the whole code here Repository

[PercyMichael]

It was in react but i need to use it in react-three-fiber

import { RoundedBox } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import React, { useEffect } from "react";
import WebGLFluid from "webgl-fluid";

const App = () => {
  useEffect(() => {
    if (typeof window !== "undefined") {
      // Your function that uses the window object goes here
      WebGLFluid(document.querySelector("canvas"), {
        // options
      });
    }
  }, []);

  return (
    <Canvas>
      <mesh></mesh>
    </Canvas>
  );
};

export default App;

[cloydlau]

1. Sorry, you confirmed that you've searched Stack Overflow, so what's the conclusion?
   There are so many similar questions like https://stackoverflow.com/questions/55151041/window-is-not-defined-in-next-js-react-app.

2. The reproduction should be a minimal and whole link, check https://antfu.me/posts/why-reproductions-are-required.
   You may find the problem yourself while creating that.