我试图将一个项目部署到Vercel,但它在构建阶段标记了一个错误,说即使安装到package.json
并正确导入到使用该模块的组件,也找不到react图标。
这里是公共存储库,其中是我的所有代码,因为它计划是公共的:https://github.com/Benevos/react-nextjs-tailwind-juice-slider
这是故障部件:
'use client';
import React from 'react';
import Link from "next/link";
import Navbar from "@/components/Navbar";
import { FaCircleUser } from "react-icons/fa6"; \\ <---- Here is where the error shows
import { FaShoppingBag } from "react-icons/fa";
import { Londrina_Solid } from 'next/font/google';
const londrinaSolid = Londrina_Solid({weight: '400' , subsets: ['latin']});
function Header({ backgroundColor, textColor }) {
return (
<header id="header" style={{backgroundColor: backgroundColor, color: textColor}}
className={`flex justify-start items-center
py-4 font-semibold
relative transition duration-[1600ms] z-0`}>
<Link href={"/#"} className={`text-3xl flex-initial ml-10
max-md:ml-5 ${londrinaSolid.className}`}>
Trademark
</Link>
<Navbar/>
<div className="flex text-xl gap-4
flex-initial ml-auto
mr-10 max-md:mr-5">
<Link href={"/#"}>
<FaCircleUser/>
</Link>
<Link href={"/#"}>
<FaShoppingBag/>
</Link>
</div>
</header>
)
}
export default Header
字符串package.json
:
{
"name": "juice-slider-vercel-fix",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "14.0.4",
"react": "^18",
"react-dom": "^18",
"react-icons": "^4.12.0",
"sass": "^1.69.5"
},
"devDependencies": {
"autoprefixer": "^10.0.1",
"eslint": "^8",
"eslint-config-next": "14.0.4",
"postcss": "^8",
"tailwindcss": "^3.3.0"
}
}
型
Vercel日志:
的数据
我使用react icons文档中建议的命令来安装模块(npm install react-icons --save
)。
已经尝试开始一个新的项目,安装React图标,并导入所有的源代码,但仍然不工作。
我也检查了deploy my next.js project on vercel, Cannot find module 'react-icons/Fa' or its corresponding type declarations,但似乎不是问题。
有人知道是什么问题吗?
1条答案
按热度按时间bvk5enib1#
您的代码构建
的数据
以
npm run start
开头的
也许你需要更新
node
版本。我的系统有:字符串
我也在vercel上成功部署了:
的
以下是生产环节:
https://testing-vercel-bay.vercel.app/
检查节点版本的vercel设置
的