部署含React与React Three Fiber的Astro到Netlify/Vercel时遇组件找不到错误

问题情况 #

开发的Astro网站结合了React和React Three Fiber，本地运行完全正常，但部署到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.

相关代码 #

MainLayout.astro #

---
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>

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;

（使用版本：Astro 2.9.2，Node 18.17.1）

解决方案 #

• 检查文件名大小写：本地系统（Windows/macOS）通常大小写不敏感，但部署服务器多为Linux（大小写敏感）。确认src/components下的文件实际名为FiberCanvas.jsx，而非小写或混合大小写的变体。
• 验证文件路径与存在性：确认../components/FiberCanvas.jsx路径正确，且该文件已被提交到Git仓库（未被.gitignore排除），部署时能被正确上传到服务器。
• 简化导入扩展名：尝试去掉导入时的.jsx扩展名，改为import FiberContainer from "../components/FiberCanvas";，Astro会自动解析正确的文件扩展名。
• 排查依赖与缓存问题：在部署平台的配置中，强制清除构建缓存，重新安装所有依赖。同时确认package.json中已正确声明@react-three/fiber、@react-three/drei等相关依赖。
• 检查组件内部导入：查看FiberCanvas.jsx中的内部导入路径，比如./Scene、../styles/fiberCanvas.css、../pages/rss.xml是否正确，这些路径错误可能导致组件本身无法被Rollup解析，间接触发找不到组件的错误。

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