代码之家  ›  专栏  ›  技术社区  ›  Benevos

Vercel无法delpoy,因为没有找到反应图标模块,但它实际上已经安装

  •  0
  • Benevos  · 技术社区  · 2 年前

    我正试图将一个项目部署到Vercel,但它在构建阶段标记了一个错误,说即使安装到也找不到反应图标 package.json 并正确导入到使用该模块的组件中。

    以下是公共存储库,其中是我计划公开的所有代码: 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日志:

    enter image description here

    我使用了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 回复  |  直到 2 年前
        1
  •  0
  •   Yilmaz    2 年前

    您的代码构建

    enter image description here

    并以开头 npm run start

    enter image description here

    也许你需要更新 node 版本我的系统具有:

    node --version
    v18.17.1
    

    我还在vercel上成功部署:

    enter image description here

    这里是生产环节:

    https://testing-vercel-bay.vercel.app/

    检查节点版本的vercel设置

    enter image description here