我正在开发一个同时使用 React 和 React Three Fiber 的 Astro 网站。在本地，一切都按预期运行，没有任何问题或错误。但是，当我尝试将网站部署到 Netlify 或 Vercel 时，部署过程失败，并且日志表明它找不到特定组件。
9:24:42 AM: file: /opt/build/repo/src/layouts/MainLayout.astro
9:24:42 AM: error Could not resolve ../components/FiberCanvas.jsx from src/layouts/MainLayout.astro
9:24:42 AM: File:
9:24:42 AM: /opt/build/repo/src/layouts/MainLayout.astro
9:24:42 AM: Stacktrace:
9:24:42 AM: RollupError: Could not resolve ../components/FiberCanvas.jsx from src/layouts/MainLayout.astro
9:24:42 AM: at error (file:///opt/build/repo/node_modules/rollup/dist/es/shared/node-entry.js:2245:30)
9:24:42 AM: at ModuleLoader.handleInvalidResolvedId (file:///opt/build/repo/node_modules/rollup/dist/es/shared/node-entry.js:24654:24)
9:24:42 AM: at file:///opt/build/repo/node_modules/rollup/dist/es/shared/node-entry.js:24616:26
9:24:42 AM: error Command failed with exit code 1. (https://ntl.fyi/exit-code-1)
9:24:42 AM: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.```
This is the code inside my `MainLayout.astro` file:
```---
import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro";
import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
import FiberContainer from "../components/FiberCanvas.jsx";
---
<!DOCTYPE html>
<html lang="en">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<body>
<FiberContainer client:load />
<div id="mainFrame">
<Header title={SITE_TITLE} />
</div>
<!-- <Footer /> -->
</body>
</html>```
And the `FiberCanvas.jsx`:
```import { Canvas } from "@react-three/fiber";
import { OrbitControls, Stage } from "@react-three/drei";
import { EffectComposer, Scanline, Noise } from "@react-three/postprocessing";
import { BlendFunction } from "postprocessing";
import { Scene } from "./Scene";
import { Perf } from "r3f-perf";
import "../styles/fiberCanvas.css";
import { get } from "../pages/rss.xml";
export const FiberContainer = () => {
const sceneCreated = ({ gl }) => {
console.log("Scene created: ", gl);
gl.setClearColor("black", 1);
};
return (
<div id="fiberCanvas">
<Canvas
onCreated={sceneCreated}
camera={{ position: [0, 0, 5], fov: 100 }}
>
<Perf />
<Stage>
<Scene />
</Stage>
<OrbitControls
autoRotate
autoRotateSpeed={3}
minDistance={1}
maxDistance={100}
/>
<EffectComposer>
<Noise blendFunction={BlendFunction.SOFT_LIGHT} opacity={0.2} />
</EffectComposer>
</Canvas>
</div>
);
};
export default FiberContainer;```
I'm using Astro version 2.9.2, and my Node version is 18.17.1
w/Astro 3.0：
import { Canvas, useThree } from "@react-three/fiber";
import { CameraControls } from "@react-three/drei";
import { useEffect, useRef } from "react";
const Scene = () => {
const { controls } = useThree();
const meshRef = useRef();
const margin = 0.2;
useEffect(() => {
if (controls) {
controls.fitToBox(meshRef.current, true, {
paddingTop: margin,
paddingLeft: margin,
paddingBottom: margin,
paddingRight: margin,
});
controls.rotateTo(Math.PI / -0.4, Math.PI / 2.5, true);
}
}, [controls]);
return (
<>
<mesh ref={meshRef}>
<boxGeometry />
<meshNormalMaterial />
</mesh>
<CameraControls makeDefault />
</>
);
};
export const Fiber = () => {
return (
<Canvas
camera={{ position: [10, -20, 5], fov: 45 }}
style={{ height: "100%" }}
>
<Scene />
</Canvas>
);
};
export default Fiber;
和
---
import Fiber from "../components/Fiber.jsx";
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro + R3F</title>
</head>
<body>
<Fiber client:load />
</body>
</html>
<style>
html,
body,
#root {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #2b2b33;
}
</style>
部署在vercel上：
https://astro-r3f-git-plain-seantai1.vercel.app/ https://github.com/seantai/astro-r3f/tree/plain