Next.js中useLoader加载.cube文件报错TypeError求助解决方案

核心修改：修正资源路径解析方式 #

Next.js 客户端组件中，绝对路径的资源解析逻辑与 Vite 不同，直接使用 /lut/F-6800-STD.cube 会导致 URL 解析失败。你需要通过 import.meta.url 构建完整的资源 URL：

'use client'; // App Router下的组件必须添加该指令
import { useLoader } from '@react-three/fiber';
import { LUTCubeLoader } from 'three/addons/loaders/LUTCubeLoader.js';

export default function App() { 
  // 构建正确的资源URL
  const cubeUrl = new URL('/lut/F-6800-STD.cube', import.meta.url).href;
  const texture = useLoader(LUTCubeLoader, cubeUrl); 
  return (
    // 你的组件内容
  );
}

额外排查点 #

• 确认组件类型：如果使用 Next.js App Router，必须在组件顶部添加 'use client' 指令，因为 useLoader 是 React Hook，仅能在客户端环境运行。
• 检查文件一致性：确保 public/lut/F-6800-STD.cube 真实存在，文件名、路径的大小写与代码完全匹配（部分部署环境严格区分大小写）。

内容的提问来源于stack exchange，提问作者MiguelG