Постоянный «реактизаторный» тип террора срезой с тремя волокнами в next.js 15.3.3 приложении (Firebase Studio)

Постоянный «реактизаторный» тип террора срезой с тремя волокнами в next.js 15.3.3 приложении (Firebase Studio) ⇐ Javascript

1 сообщение • Страница 1 из 1

Anonymous

Постоянный «реактизаторный» тип террора срезой с тремя волокнами в next.js 15.3.3 приложении (Firebase Studio)

Цитата

Сообщение Anonymous » 08 июн 2025, 18:19

Я сталкиваюсь с постоянным типом: не могу читать свойства неопределенного (чтение 'ReactcurrentOwner') при попытке интегрировать REACT Three Fiber (R3F) в мое приложение Next.js, которое разрабатывается в Firebase Studio. Я пробовал многочисленные шаги по устранению неполадок, но не смог его разрешить.

Код: Выделить всё

TypeError: Cannot read properties of undefined (reading 'ReactCurrentOwner')
at $$$reconciler (webpack-internal:///(app-pages-browser)/./node_modules/react-reconciler/cjs/react-reconciler.development.js:498:46)
at createRenderer (webpack-internal:///(app-pages-browser)/./node_modules/@react-three/fiber/dist/events-776716bd.esm.js:271:77)
at eval (webpack-internal:///(app-pages-browser)/./node_modules/@react-three/fiber/dist/events-776716bd.esm.js:1778:5)
// ... (rest of the stack trace as you provided, e.g.:)
at (app-pages-browser)/./node_modules/@react-three/fiber/dist/events-776716bd.esm.js (https://6000-firebase-studio-1749286620707.cluster-3gc7bglotjgwuxlqpiut7yyqt4.cloudworkstations.dev/_next/static/chunks/_app-pages-browser_src_components_animations_ActualSophisticatedScene_tsx.js:68:1)
at options.factory (...)
at __webpack_require__ (...)
// ...
at ClientPageRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/client-page.js:20:50)

Environment Details:
Next.js: 15.3.3
React: 18.3.1
React DOM: 18.3.1
@react-three/fiber: alpha (e.g., ^8.17.0-alpha.0 - specify the exact alpha version if known from your lock file)
@React-Three /DREI: ^9.105.6 (или настройка, чтобы соответствовать версии, установленной вместе с R3F Alpha)
Three: ^0,164.1 (или адаптируется в соответствии с установленной версией)
Environment: Firebase Studio (Cloud IDE)
node версия: v20.19.0
browser: chromium: 137.7.7.7.7.7.7.1.7.7.7.7.7.7.7.7.7.71.7.7.71.71.7.71.71.7.71.7.7.7.71.71.71.7 /> Использование маршрутизатора приложения next.js.
Соответствующие фрагменты кода: < /p>
my R3F -компонент сцены (ActualSophisticatedscene.tsx): < /p>

Код: Выделить всё

'use client';

import React, { useState, useEffect, useMemo, useRef, Suspense } from 'react';
import { Canvas, useFrame, extend, useThree } from '@react-three/fiber';
import { OrbitControls, Text, Line, Html } from '@react-three/drei';
import * as THREE from 'three';

// Scene Settings
const LANDSCAPE_WIDTH = 200;
const LANDSCAPE_DEPTH = 150;
const HILL_AMPLITUDE = 8;
const HILL_FREQUENCY = 0.05;
const NUM_DATA_STREAMS = 60;
const LANDSCAPE_COLOR_DARK_BLUE = new THREE.Color('#0A101A');
const LANDSCAPE_COLOR_EARTH_TONE = new THREE.Color('#101C2A');
const STREAM_COLOR_CYAN = new THREE.Color('#00FFFF');
const STREAM_COLOR_WHITE = new THREE.Color('#E0E0E0');
const ENERGY_POINT_COLOR = new THREE.Color('#FFFFFF');
const SPROUT_STEM_COLOR = new THREE.Color('#34D399');
const SPROUT_LEAF_COLOR = new THREE.Color('#6EE7B7');
const SPROUT_GLOW_COLOR = new THREE.Color('#FFFFFF');

// Landscape Component
const Landscape: React.FC = () => {
const meshRef = useRef(null!);
const geometry = useMemo(() => {
const geom = new THREE.PlaneGeometry(LANDSCAPE_WIDTH, LANDSCAPE_DEPTH, 40, 30);
const { array } = geom.attributes.position;
for (let i = 0; i < array.length; i += 3) {
const x = array[i];
const y = array[i + 1];
array[i + 2] = (Math.sin(x * HILL_FREQUENCY) + Math.cos(y * HILL_FREQUENCY * 0.7)) * HILL_AMPLITUDE * (1 - Math.abs(x / LANDSCAPE_WIDTH)*0.5) ;
}
geom.computeVertexNormals();
return geom;
}, []);

return (



);
};

// DataStream Component
interface DataStreamProps {
id: string;
startPoint: THREE.Vector3;
midPoint: THREE.Vector3;
endPoint: THREE.Vector3;
color: THREE.Color;
animationPhase: 'tracing' | 'converging' | 'fading';
}

const DataStream: React.FC = ({ startPoint, midPoint, endPoint, color, animationPhase }) => {
const lineRef = useRef();
const [currentPoints, setCurrentPoints] = useState([startPoint, startPoint]);
const [visible, setVisible] = useState(false);

useEffect(() => {
setVisible(true);
}, []);

useFrame((_state, delta) => {
if (!lineRef.current || !visible) return;
const speed = animationPhase === 'converging' ? 25 : 15;
let progress = (lineRef.current.userData.progress || 0) + speed * delta;
lineRef.current.userData.progress = progress;
let curve;
if (animationPhase === 'tracing') {
curve = new THREE.QuadraticBezierCurve3(startPoint, midPoint, endPoint);
} else {
curve = new THREE.LineCurve3(startPoint, endPoint);
}
const pointsOnCurve = Math.min(Math.floor(progress), 50);
if (pointsOnCurve < 2) {
setCurrentPoints([startPoint, startPoint]);
return;
}
const newPoints = curve.getPoints(pointsOnCurve -1);
setCurrentPoints(newPoints);
if (animationPhase === 'fading') {
(lineRef.current.material as THREE.LineBasicMaterial).opacity -= 2.5 * delta;
if ((lineRef.current.material as THREE.LineBasicMaterial).opacity  = ({ onAnimationComplete }) => {
const groupRef = useRef(null!);
const [scale, setScale] = useState(0.01);
const [phase, setPhase] = useState('growing');
useEffect(() => {
let growingTimeout: NodeJS.Timeout;
if (phase === 'growing') growingTimeout = setTimeout(() => setPhase('pulsing'), 1200);
let pulsingTimeout: NodeJS.Timeout;
if (phase === 'pulsing') pulsingTimeout = setTimeout(() => { setPhase('stable'); onAnimationComplete(); }, 1500);
return () => { clearTimeout(growingTimeout); clearTimeout(pulsingTimeout);  };
}, [phase, onAnimationComplete]);

useFrame((_state, delta) => {
if (!groupRef.current) return;
if (phase === 'growing') setScale(s => Math.min(s + 1.0 * delta, 1));
else if (phase === 'pulsing') groupRef.current.scale.setScalar(1 + Math.sin(_state.clock.elapsedTime * 5) * 0.1);
else if (phase === 'stable') groupRef.current.scale.setScalar(1);
groupRef.current.scale.set(scale, scale, scale);
});

return (





{[...Array(5)].map((_, i) => (




))}


);
};

// Main Scene Logic for R3F
const SceneContent: React.FC = () => {
const { camera } = useThree();
const [animationPhase, setAnimationPhase] = useState('initial');
const [showSprout, setShowSprout] = useState(false);
const [showTagline, setShowTagline] = useState(false);

const streams = useMemo(() => Array.from({ length: NUM_DATA_STREAMS }).map((_, i) => {
const angle = (i / NUM_DATA_STREAMS) * Math.PI * 2;
const radius = LANDSCAPE_WIDTH / 2.5 + (Math.random() - 0.5) * 20;
const startX = Math.cos(angle) * radius;
const startZ = Math.sin(angle) * radius;
const startY = (Math.sin(startX * HILL_FREQUENCY) + Math.cos(startZ * HILL_FREQUENCY * 0.7)) * HILL_AMPLITUDE + Math.random() * 3 - 1.5 - (HILL_AMPLITUDE + 5);
const midX = startX * 0.4 + (Math.random() - 0.5) * 30;
const midZ = startZ * 0.4 + (Math.random() - 0.5) * 30;
const midY = startY * 0.5 + (Math.random() * 5 - 2.5);
return { id: `stream-${i}`, startPoint: new THREE.Vector3(startX, startY, startZ), midPoint: new THREE.Vector3(midX, midY, midZ), endPoint: new THREE.Vector3(0, - (HILL_AMPLITUDE + 5) + 1, 0), color: i % 2 === 0 ? STREAM_COLOR_CYAN : STREAM_COLOR_WHITE };
}), []);

useEffect(() => {
camera.position.set(0, 25, 55);
camera.lookAt(0, 0, 0);
const t0 = setTimeout(() => setAnimationPhase('tracing'), 500);
const t1 = setTimeout(() => setAnimationPhase('converging'), 4500);
const t2 = setTimeout(() => { setAnimationPhase('blossoming'); setShowSprout(true); }, 7000);
return () => { clearTimeout(t0); clearTimeout(t1); clearTimeout(t2);};
}, [camera]);

const handleSproutAnimationComplete = () => { setAnimationPhase('stable'); setTimeout(() => setShowTagline(true), 500); };

const energyPointRef = useRef(null!);
useFrame((_state, delta) => {
if (animationPhase === 'converging' && energyPointRef.current) {
energyPointRef.current.scale.setScalar(Math.max(0.1, energyPointRef.current.scale.x + 2 * delta));
(energyPointRef.current.material as THREE.MeshBasicMaterial).opacity = Math.min(1, (energyPointRef.current.material as THREE.MeshBasicMaterial).opacity + 1.5 * delta);
} else if (animationPhase === 'blossoming' && energyPointRef.current) {
energyPointRef.current.scale.setScalar(Math.max(0, energyPointRef.current.scale.x - 5 * delta));
(energyPointRef.current.material as THREE.MeshBasicMaterial).opacity = Math.max(0, (energyPointRef.current.material as THREE.MeshBasicMaterial).opacity - 3 * delta);
}
});

return (







{streams.map(stream => (

))}
{(animationPhase === 'converging' || animationPhase === 'blossoming') && (




)}
{showSprout && }
{showTagline && (

FarmIT: Cultivating the Future.

)}
{/*  */}

);
};

const ActualSophisticatedScene: React.FC = () => {
const [isClientMounted, setIsClientMounted] = useState(false);

useEffect(() => {
setIsClientMounted(true);
}, []);

if (!isClientMounted) {
// This fallback is shown before client-side mounting, or if R3F is not used/commented out.
return (

3D Animation Placeholder

The React Three Fiber (R3F) 3D animation is intended here.

If you're seeing this after the page load, there might be an issue with the R3F rendering.

);
}

// Attempt to render R3F Canvas only on the client
return (







);
};

export default ActualSophisticatedScene;

Эта сцена затем динамически импортируется в мою домашнюю страницу (src/app/page.tsx) через OpternatedHeratedHereAnimation.tsx, которая также использует динамический импорт:
// In src/app/page.tsx within a HeroSection component
const SophisticatedHeroAnimation = dynamic(
() => import('@/components/animations/SophisticatedHeroAnimation'),
{
ssr: false,
loading: () =>
Loading Animation...
}
);

// SophisticatedHeroAnimation.tsx itself dynamically loads ActualSophisticatedScene.tsx:
// const ActualSophisticatedScene = dynamic(() => import('@/components/animations/ActualSophisticatedScene'), { ssr: false, /* ...loading */ });

function HeroSection() {
// ...
return (

{/* Ensured dimensions */}

{/* ... rest of hero content ... */}

);
}
< /code>
Устранение неисправностей, предпринятые: < /p>
Проверенный 'Использование клиента';: обеспечить все компоненты R3F, и их прямые родители - это компоненты клиента.
Версии зависимости: пробовали различные комбинации версий Next.js, React, R3F (Statable и Alpha), Drei и три. В настоящее время в версиях, перечисленных выше.
Динамический импорт: используется следующая /динамическая с SSR: False для сцены R3F и ее прямой обертки.
Упрощенная сцена: протестирована с очень базовой сценой R3F (например, просто спиннинговой куб), и все еще происходит. Содержание R3F после установки на клиенте.
Прямая загрузка: попытка динамической загрузки фактическогософизированного scene.tsx непосредственно в page.tsx для упрощения компонентного дерева.
Node Modules: Cleared node_modules и блокировки (br /> chally-leck.json /pnpm-lock.yaml) и переосмысленный. Папка.
Ни один из этих шагов не разрешил ошибку реактизации. Похоже, что ошибка глубоко возникает в рамках React-Econciler, когда R3F пытается создать его рендеринг. /> Существуют ли известные несовместимости или конкретные конфигурации, необходимые для R3F в такой среде, которые я мог бы отсутствовать? Любое понимание или помощь будет очень оценено!
Заранее.

Подробнее здесь: https://stackoverflow.com/questions/796 ... xt-js-15-3

1749395963

Anonymous

 Я сталкиваюсь с постоянным типом: не могу читать свойства неопределенного (чтение 'ReactcurrentOwner')  при попытке интегрировать REACT Three Fiber (R3F) в мое приложение Next.js, которое разрабатывается в Firebase Studio. Я пробовал многочисленные шаги по устранению неполадок, но не смог его разрешить.[code]TypeError: Cannot read properties of undefined (reading 'ReactCurrentOwner')
at $$$reconciler (webpack-internal:///(app-pages-browser)/./node_modules/react-reconciler/cjs/react-reconciler.development.js:498:46)
at createRenderer (webpack-internal:///(app-pages-browser)/./node_modules/@react-three/fiber/dist/events-776716bd.esm.js:271:77)
at eval (webpack-internal:///(app-pages-browser)/./node_modules/@react-three/fiber/dist/events-776716bd.esm.js:1778:5)
// ... (rest of the stack trace as you provided, e.g.:)
at (app-pages-browser)/./node_modules/@react-three/fiber/dist/events-776716bd.esm.js (https://6000-firebase-studio-1749286620707.cluster-3gc7bglotjgwuxlqpiut7yyqt4.cloudworkstations.dev/_next/static/chunks/_app-pages-browser_src_components_animations_ActualSophisticatedScene_tsx.js:68:1)
at options.factory (...)
at __webpack_require__ (...)
// ...
at ClientPageRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/client-page.js:20:50)
[/code]
Environment Details:
Next.js: 15.3.3
React: 18.3.1
React DOM: 18.3.1
@react-three/fiber: alpha (e.g., ^8.17.0-alpha.0 - specify the exact alpha version if known from your lock file)
@React-Three /DREI: ^9.105.6 (или настройка, чтобы соответствовать версии, установленной вместе с R3F Alpha)
Three: ^0,164.1 (или адаптируется в соответствии с установленной версией)
Environment: Firebase Studio (Cloud IDE)
node версия: v20.19.0
browser: chromium: 137.7.7.7.7.7.7.1.7.7.7.7.7.7.7.7.7.71.7.7.71.71.7.71.71.7.71.7.7.7.71.71.71.7 /> Использование маршрутизатора приложения next.js.
Соответствующие фрагменты кода: < /p>
my R3F -компонент сцены (ActualSophisticatedscene.tsx): < /p>
[code]'use client';

import React, { useState, useEffect, useMemo, useRef, Suspense } from 'react';
import { Canvas, useFrame, extend, useThree } from '@react-three/fiber';
import { OrbitControls, Text, Line, Html } from '@react-three/drei';
import * as THREE from 'three';

// Scene Settings
const LANDSCAPE_WIDTH = 200;
const LANDSCAPE_DEPTH = 150;
const HILL_AMPLITUDE = 8;
const HILL_FREQUENCY = 0.05;
const NUM_DATA_STREAMS = 60;
const LANDSCAPE_COLOR_DARK_BLUE = new THREE.Color('#0A101A');
const LANDSCAPE_COLOR_EARTH_TONE = new THREE.Color('#101C2A');
const STREAM_COLOR_CYAN = new THREE.Color('#00FFFF');
const STREAM_COLOR_WHITE = new THREE.Color('#E0E0E0');
const ENERGY_POINT_COLOR = new THREE.Color('#FFFFFF');
const SPROUT_STEM_COLOR = new THREE.Color('#34D399');
const SPROUT_LEAF_COLOR = new THREE.Color('#6EE7B7');
const SPROUT_GLOW_COLOR = new THREE.Color('#FFFFFF');

// Landscape Component
const Landscape: React.FC = () => {
const meshRef = useRef(null!);
const geometry = useMemo(() => {
const geom = new THREE.PlaneGeometry(LANDSCAPE_WIDTH, LANDSCAPE_DEPTH, 40, 30);
const { array } = geom.attributes.position;
for (let i = 0; i < array.length; i += 3) {
const x = array[i];
const y = array[i + 1];
array[i + 2] = (Math.sin(x * HILL_FREQUENCY) + Math.cos(y * HILL_FREQUENCY * 0.7)) * HILL_AMPLITUDE * (1 - Math.abs(x / LANDSCAPE_WIDTH)*0.5) ;
}
geom.computeVertexNormals();
return geom;
}, []);

return (



);
};

// DataStream Component
interface DataStreamProps {
id: string;
startPoint: THREE.Vector3;
midPoint: THREE.Vector3;
endPoint: THREE.Vector3;
color: THREE.Color;
animationPhase: 'tracing' | 'converging' | 'fading';
}

const DataStream: React.FC = ({ startPoint, midPoint, endPoint, color, animationPhase }) => {
const lineRef = useRef();
const [currentPoints, setCurrentPoints] = useState([startPoint, startPoint]);
const [visible, setVisible] = useState(false);

useEffect(() => {
setVisible(true);
}, []);

useFrame((_state, delta) => {
if (!lineRef.current || !visible) return;
const speed = animationPhase === 'converging' ? 25 : 15;
let progress = (lineRef.current.userData.progress || 0) + speed * delta;
lineRef.current.userData.progress = progress;
let curve;
if (animationPhase === 'tracing') {
curve = new THREE.QuadraticBezierCurve3(startPoint, midPoint, endPoint);
} else {
curve = new THREE.LineCurve3(startPoint, endPoint);
}
const pointsOnCurve = Math.min(Math.floor(progress), 50);
if (pointsOnCurve < 2) {
setCurrentPoints([startPoint, startPoint]);
return;
}
const newPoints = curve.getPoints(pointsOnCurve -1);
setCurrentPoints(newPoints);
if (animationPhase === 'fading') {
(lineRef.current.material as THREE.LineBasicMaterial).opacity -= 2.5 * delta;
if ((lineRef.current.material as THREE.LineBasicMaterial).opacity  = ({ onAnimationComplete }) => {
const groupRef = useRef(null!);
const [scale, setScale] = useState(0.01);
const [phase, setPhase] = useState('growing');
useEffect(() => {
let growingTimeout: NodeJS.Timeout;
if (phase === 'growing') growingTimeout = setTimeout(() => setPhase('pulsing'), 1200);
let pulsingTimeout: NodeJS.Timeout;
if (phase === 'pulsing') pulsingTimeout = setTimeout(() => { setPhase('stable'); onAnimationComplete(); }, 1500);
return () => { clearTimeout(growingTimeout); clearTimeout(pulsingTimeout);  };
}, [phase, onAnimationComplete]);

useFrame((_state, delta) => {
if (!groupRef.current) return;
if (phase === 'growing') setScale(s => Math.min(s + 1.0 * delta, 1));
else if (phase === 'pulsing') groupRef.current.scale.setScalar(1 + Math.sin(_state.clock.elapsedTime * 5) * 0.1);
else if (phase === 'stable') groupRef.current.scale.setScalar(1);
groupRef.current.scale.set(scale, scale, scale);
});

return (





{[...Array(5)].map((_, i) => (




))}


);
};

// Main Scene Logic for R3F
const SceneContent: React.FC = () => {
const { camera } = useThree();
const [animationPhase, setAnimationPhase] = useState('initial');
const [showSprout, setShowSprout] = useState(false);
const [showTagline, setShowTagline] = useState(false);

const streams = useMemo(() => Array.from({ length: NUM_DATA_STREAMS }).map((_, i) => {
const angle = (i / NUM_DATA_STREAMS) * Math.PI * 2;
const radius = LANDSCAPE_WIDTH / 2.5 + (Math.random() - 0.5) * 20;
const startX = Math.cos(angle) * radius;
const startZ = Math.sin(angle) * radius;
const startY = (Math.sin(startX * HILL_FREQUENCY) + Math.cos(startZ * HILL_FREQUENCY * 0.7)) * HILL_AMPLITUDE + Math.random() * 3 - 1.5 - (HILL_AMPLITUDE + 5);
const midX = startX * 0.4 + (Math.random() - 0.5) * 30;
const midZ = startZ * 0.4 + (Math.random() - 0.5) * 30;
const midY = startY * 0.5 + (Math.random() * 5 - 2.5);
return { id: `stream-${i}`, startPoint: new THREE.Vector3(startX, startY, startZ), midPoint: new THREE.Vector3(midX, midY, midZ), endPoint: new THREE.Vector3(0, - (HILL_AMPLITUDE + 5) + 1, 0), color: i % 2 === 0 ? STREAM_COLOR_CYAN : STREAM_COLOR_WHITE };
}), []);

useEffect(() => {
camera.position.set(0, 25, 55);
camera.lookAt(0, 0, 0);
const t0 = setTimeout(() => setAnimationPhase('tracing'), 500);
const t1 = setTimeout(() => setAnimationPhase('converging'), 4500);
const t2 = setTimeout(() => { setAnimationPhase('blossoming'); setShowSprout(true); }, 7000);
return () => { clearTimeout(t0); clearTimeout(t1); clearTimeout(t2);};
}, [camera]);

const handleSproutAnimationComplete = () => { setAnimationPhase('stable'); setTimeout(() => setShowTagline(true), 500); };

const energyPointRef = useRef(null!);
useFrame((_state, delta) => {
if (animationPhase === 'converging' && energyPointRef.current) {
energyPointRef.current.scale.setScalar(Math.max(0.1, energyPointRef.current.scale.x + 2 * delta));
(energyPointRef.current.material as THREE.MeshBasicMaterial).opacity = Math.min(1, (energyPointRef.current.material as THREE.MeshBasicMaterial).opacity + 1.5 * delta);
} else if (animationPhase === 'blossoming' && energyPointRef.current) {
energyPointRef.current.scale.setScalar(Math.max(0, energyPointRef.current.scale.x - 5 * delta));
(energyPointRef.current.material as THREE.MeshBasicMaterial).opacity = Math.max(0, (energyPointRef.current.material as THREE.MeshBasicMaterial).opacity - 3 * delta);
}
});

return (







{streams.map(stream => (

))}
{(animationPhase === 'converging' || animationPhase === 'blossoming') && (




)}
{showSprout && }
{showTagline && (

FarmIT: Cultivating the Future.

)}
{/*  */}

);
};

const ActualSophisticatedScene: React.FC = () => {
const [isClientMounted, setIsClientMounted] = useState(false);

useEffect(() => {
setIsClientMounted(true);
}, []);

if (!isClientMounted) {
// This fallback is shown before client-side mounting, or if R3F is not used/commented out.
return (

3D Animation Placeholder

The React Three Fiber (R3F) 3D animation is intended here.

If you're seeing this after the page load, there might be an issue with the R3F rendering.

);
}

// Attempt to render R3F Canvas only on the client
return (







);
};

export default ActualSophisticatedScene;
[/code]
Эта сцена затем динамически импортируется в мою домашнюю страницу (src/app/page.tsx) через OpternatedHeratedHereAnimation.tsx, которая также использует динамический импорт: 
// In src/app/page.tsx within a HeroSection component
const SophisticatedHeroAnimation = dynamic(
() => import('@/components/animations/SophisticatedHeroAnimation'),
{
ssr: false,
loading: () => 
Loading Animation...
}
);

// SophisticatedHeroAnimation.tsx itself dynamically loads ActualSophisticatedScene.tsx:
// const ActualSophisticatedScene = dynamic(() => import('@/components/animations/ActualSophisticatedScene'), { ssr: false, /* ...loading */ });

function HeroSection() {
// ...
return (


 {/* Ensured dimensions */}



{/* ... rest of hero content ... */}

);
}
< /code>
Устранение неисправностей, предпринятые: < /p>
Проверенный 'Использование клиента';: обеспечить все компоненты R3F, и их прямые родители - это компоненты клиента.
Версии зависимости: пробовали различные комбинации версий Next.js, React, R3F (Statable и Alpha), Drei и три. В настоящее время в версиях, перечисленных выше.
Динамический импорт: используется следующая /динамическая с SSR: False для сцены R3F и ее прямой обертки.
Упрощенная сцена: протестирована с очень базовой сценой R3F (например, просто спиннинговой куб), и все еще происходит. Содержание R3F после установки на клиенте.
Прямая загрузка: попытка динамической загрузки фактическогософизированного scene.tsx непосредственно в page.tsx для упрощения компонентного дерева.
Node Modules: Cleared node_modules и блокировки (br /> chally-leck.json /pnpm-lock.yaml) и переосмысленный. Папка.
Ни один из этих шагов не разрешил ошибку реактизации. Похоже, что ошибка глубоко возникает в рамках React-Econciler, когда R3F пытается создать его рендеринг. /> Существуют ли известные несовместимости или конкретные конфигурации, необходимые для R3F в такой среде, которые я мог бы отсутствовать? Любое понимание или помощь будет очень оценено! 
Заранее.  

Подробнее здесь: [url]https://stackoverflow.com/questions/79657951/persistent-reactcurrentowner-typeerror-with-react-three-fiber-in-next-js-15-3[/url]