Three js problem

Answered

import_cubedev posted this in #help-forum

2024-04-14T16:14:53.520Z

Hey guys so i was making a protofillo for me and i tryed to use three js but now i get this error

src/app/components/Logos.tsx
Error: 
  × You're importing a component that needs useRef. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
  │ Learn more: https://nextjs.org/docs/getting-started/react-essentials
  │ 
  │ 
   ╭─[D:\Projects\igorseili.dex\src\app\components\Logos.tsx:1:1]
 1 │ // Import useClient from next
 2 │ import { useClient } from 'next';
 3 │ import * as THREE from 'three';
 4 │ import { useRef } from 'react';
   ·          ──────
 5 │ 
 6 │ const Logos = () => {
 6 │   // Use useClient to ensure client-side rendering
   ╰────

i dont know how to fix it as i think this should run on client

Answered by joulev

it's not import { useClient } from "next", it is "use client"

View full answer

8 Replies

@import_cubedev Hey guys so i was making a protofillo for me and i tryed to use three js but now i get this error src/app/components/Logos.tsx Error: × You're importing a component that needs useRef. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. │ Learn more: https://nextjs.org/docs/getting-started/react-essentials │ │ ╭─[D:\Projects\igorseili.dex\src\app\components\Logos.tsx:1:1] 1 │ // Import useClient from next 2 │ import { useClient } from 'next'; 3 │ import * as THREE from 'three'; 4 │ import { useRef } from 'react'; · ────── 5 │ 6 │ const Logos = () => { 6 │ // Use useClient to ensure client-side rendering ╰──── i dont know how to fix it as i think this should run on client

joulev

2024-04-14T16:20:28.653Z

it's not import { useClient } from "next", it is "use client"

Answer

import_cubedevOP

2024-04-14T16:22:44.740Z

oh man i love the triange anim when its building

import_cubedevOP

2024-04-14T16:38:59.439Z

in browser looks like this

but in vs code like this ignore the white thingy its the threejs canvas

flex does not work

@joulev

@import_cubedev in browser looks like this

joulev

2024-04-14T17:00:11.316Z

That’s a bug in your three js logic perhaps, you need to fix it. That bug is irrelevant to nextjs and I suggest asking in three js support communities

If it’s not related to threejs then make a reproduction example without that library, and make a new post here. This question has already been resolved.