使用 Typsecript 和 Tailwind 编译我的 Next js 项目失败

npm run dev 模式工作正常,但由于以下代码片段,我在构建过程中收到编译失败错误。

这些是 package.json 文件中的脚本、依赖项和开发依赖项:

perl 复制代码
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "autoprefixer": "^10.4.21",
    "clsx": "^2.1.1",
    "motion": "^12.18.1",
    "next": "15.3.3",
    "postcss": "^8.5.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwind-merge": "^3.3.0"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@svgr/webpack": "^8.1.0",
    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "babel-plugin-inline-react-svg": "^2.0.2",
    "eslint": "^9",
    "eslint-config-next": "15.3.3",
    "tailwindcss": "^4.1.8",
    "typescript": "^5"
  }
}

这是英雄部分的完整代码:

javascript 复制代码
"use client";
import ArrowIcon from "@/assets/arrow-right.svg";
import poundImage from "@/assets/pound.png";
import houseImage from "@/assets/house.png";
import businessImage from "@/assets/business.png";

import { motion, useScroll, useTransform } from "framer-motion";

import { useRef } from "react";
export const Hero = () => {
    const heroRef = useRef(null);
    const { scrollYProgress } = useScroll({
        target: heroRef,
        offset: ["start end", "end start"],
    });
    const translateY = useTransform(scrollYProgress, [0, 1], [150, -150]);



    return <section ref={heroRef} className="pt-8 pb-20 md:pt-5 pl-20 pr-20 md:pb-10 bg-[radial-gradient(ellipse_200%_100%_at_bottom_left,#8a0194,#ffffff_100%)] overflow-x-clip">
        <div className="container">
            <div className="md:flex items-center">
                <div className="md:w-[478px]">
                    <div className="text-sm inline-flex border border-[#222]/10 px-3 py-1 rounded-lg tracking-tight">Rethink Finance</div>
                    <h1 className="text-5xl md:text-7xl font-bold tracking-tighter bg-gradient-to-b from-black to-[#8a0194] text-transparent bg-clip-text mt-6">Empowering Your Business with Smart Financial Solutions</h1>
                    <p className="text-xl text-[#8a0194] tracking-tight mt-6">Whether you are seizing new opportunities, investing in inventory, or streamlining your cash flow, our tailored financial solutions are designed to power your progress and take your business further.</p>
                    <div className="flex gap-1 items-center mt-[30px]">
                        <a href="https://us.bigin.online/org884823567/forms/check-your-funding-eligibility-for-free"><button className="bg-fuchsia-800 text-white focus:outline-none hover:bg-indigo-600 px-4 py-2 rounded-lg font-medium inline-flex items-center justify-center tracking-tight">Get Started</button></a>
                        <button className="text-black px-4 py-2 font-light inline-flex items-center justify-center tracking-tight gap-1">
                            <span>Learn more</span>
                            <ArrowIcon className="h-5 w-5" />
                        </button>
                    </div>
                </div>
                <div className="mt-20 md:mt-0 md:h-[648px] md:flex-1 relative">
                    <motion.img
                        src={poundImage.src} alt="Pound Image" className="md:absolute md:h-full md:w-auto md:max-w-none md:-left-6 lg:left-0"
                        animate={{
                            translateY: [-30, 30],
                        }}
                        transition={{
                            repeat: Infinity,
                            repeatType: "mirror",
                            duration: 2,
                            ease: "easeInOut",
                        }} />
                    <motion.img src={houseImage.src} width={220} height={220} alt="House image" className="hidden md:block -top-8 -left-32 md:absolute" style={{ translateY: translateY }} />
                    <motion.img src={businessImage.src} width={220} height={220} alt="Business image" className="hidden lg:block absolute top-[524px] left-[448px] rotate-[30deg]" style={{ translateY: translateY, }} />
                </div>
            </div>
        </div>

    </section>
};

这是我尝试编译项目时遇到的错误:

ini 复制代码
./src/sections/Hero.tsx:39:29
Type error: Object literal may only specify known properties, and 'translateY' does not exist in type 'string[] | TargetAndTransition | LegacyAnimationControls'.

  37 |                         src={poundImage.src} alt="Pound Image" className="md:absolute md:h-full md:w-auto md:max-w-none md:-left-6 lg:left-0"
  38 |                         animate={{
> 39 |                             translateY: [-30, 30],
     |                             ^
  40 |                         }}
  41 |                         transition={{
  42 |                             repeat: Infinity,
Next.js build worker exited with code: 1 and signal: null

造成此问题的原因是什么?以及如何解决。

对此有一个解决方案。以上内容由企业信息服务平台提供,致力于工商信用信息查询、企业风险识别、经营数据分析。 访问官网了解更多:www.mytiesarongs.com

相关推荐
Rhys..8 小时前
python + Flask模块学习 1 基础用法
python·学习·前端框架·flask
Baklib梅梅11 小时前
2025 年 8 个最佳网站内容管理系统(CMS)
前端·ruby on rails·前端框架·ruby
知识分享小能手17 小时前
React学习教程,从入门到精通, React 入门指南:React JSX 语法知识点详解及案例代码(8)
前端·javascript·vue.js·学习·react.js·前端框架·anti-design-vue
叫我阿柒啊1 天前
从Java全栈到前端框架:一次真实的面试对话
java·spring boot·微服务·前端框架·vue3·全栈开发
叫我阿柒啊1 天前
Java全栈开发工程师面试实战:从基础到微服务的完整技术演进
java·spring boot·微服务·前端框架·vue3·全栈开发·面试技巧
EndingCoder1 天前
数据库集成:使用 SQLite 与 Electron
数据库·electron·sqlite·前端框架·node.js
开发者小天1 天前
在Ant Design Vue 中使用图片预览的插件
前端·javascript·vue.js·前端框架
山雀~2 天前
React实现列表拖拽排序
前端·react.js·前端框架
OEC小胖胖2 天前
React学习之路永无止境:下一步,去向何方?
前端·javascript·学习·react.js·前端框架·react·web
EndingCoder2 天前
集成 Node.js 模块:文件系统与网络操作
javascript·网络·electron·前端框架·node.js