React网站集成Spline并Vercel部署：@格式依赖报错求助

组件代码 #

import React, { useState, useEffect } from "react";
import { content } from "../Content";
import Spline from '@splinetool/react-spline';
// import Keyboard from "./components/Keyboard.jsx";

const Hero = () => {
    const { hero } = content;
    const [showContent, setShowContent] = useState(false);

    useEffect(() => {
        const handleScroll = () => {
            const threshold = window.innerHeight / 2;
            const isScrolled = window.scrollY > threshold;
            setShowContent((prev) => (isScrolled ? true : prev));
        };

        handleScroll();
        window.addEventListener("scroll", handleScroll);

        return () => {
            window.removeEventListener("scroll", handleScroll);
        };
    }, []);

    return (
        <section id="home" className="relative overflow-hidden">
            <div className="min-h-screen relative flex md:flex-row flex-col-reverse md:items-end justify-center items-center">
                <div
                    className={`absolute h-full md:w-4/12 w-8/12 top-0 right-0 bottom-0 z-10 ${showContent ? "opacity-100 translate-x-0" : "opacity-0 translate-x-10"} bg-primaryLinear`}
                >
                    <h2 className="rotate-90 absolute top-[30%] right-[15%]" style={{ fontSize: '3rem' }}>{hero.title}</h2>
                </div>

                {showContent && (
                    <>
                        <Spline scene="https://prod.spline.design/HKlfAoUoTv3w35yQ/scene.splinecode" />

                        {/* <Keyboard /> */}
                    </>
                )}

                <div className={`pb-16 px-6 pt-12 z-10 text-center-mobile ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"}`}>
                    <br />
                    <div className="flex flex-col gap-10 mt-10">
                        {hero.hero_content.map((content, i) => (
                            <div
                                key={i}
                                className={`flex items-center w-80
                                    ${i === 1 && " flex-row-reverse text-right flex-col-reverse-mobile"}
                                `}
                                style={{ transitionDelay: `${i * 300}ms` }}
                            >
                                <h3>{content.count}</h3>
                                <p>{content.text}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
};

export default Hero;

问题描述 #

我在React项目中集成Spline组件并部署到Vercel时遇到异常：仅Spline的@格式导入语句引发问题，项目提示缺失node_modules相关依赖，但安装依赖后又出现更多问题，不过代码可正常推送到GitHub仓库，求解决方法。

解决方案步骤 #

• 确认依赖安装正确性
  1. 执行官方安装命令：npm install @splinetool/react-spline（npm）或yarn add @splinetool/react-spline（yarn），不要手动修改node_modules文件夹
  2. 检查package.json文件，确认@splinetool/react-spline已在依赖列表中，版本号无异常
• 清理缓存并重新安装依赖
  1. 删除本地node_modules文件夹：Mac/Linux执行rm -rf node_modules，Windows执行rmdir /s node_modules
  2. 删除package-lock.json（npm）或yarn.lock（yarn）文件
  3. 重新执行npm install或yarn install完成依赖安装
• Vercel部署配置检查
  1. 确保Vercel项目的构建命令设置为React项目默认的npm run build
  2. 确认Vercel环境变量与本地一致，无需额外配置Spline专属环境变量，只需保证依赖能正常安装
• 代码细节验证
  1. 确认Spline组件的scene链接有效，当前使用的链接可正常访问
  2. 检查Spline导入语句拼写，确保@splinetool/react-spline无拼写错误

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