找不到模块：错误：无法解析“react-pro-sidebar/dist/css/styles.css”

Question

这些是我的重要声明

import React, { useState } from "react";

//import react pro sidebar components
import {
    ProSidebar,
    Menu,
    MenuItem,
    SidebarHeader,
    SidebarFooter,
    SidebarContent,
} from "react-pro-sidebar";

//import icons from react icons
import { FaList, FaRegHeart } from "react-icons/fa";
import { FiHome, FiLogOut, FiArrowLeftCircle, FiArrowRightCircle } from "react-icons/fi";
import { RiPencilLine } from "react-icons/ri";
import { BiCog } from "react-icons/bi";


//import sidebar css from react-pro-sidebar module and our custom css 
import "react-pro-sidebar/dist/css/styles.css";
import "./Header.css";


const Header = () => {

    //create initial menuCollapse state using useState hook
    const [menuCollapse, setMenuCollapse] = useState(false)

    //create a custom function that will change menucollapse state from false to true and true to false
    const menuIconClick = () => {
        //condition checking to change state from true to false and vice versa
        menuCollapse ? setMenuCollapse(false) : setMenuCollapse(true);
    };

    return (
        <>
            <div id="header">
                {/* collapsed props to change menu size using menucollapse state */}
                <ProSidebar collapsed={menuCollapse}>
                    <SidebarHeader>
                        <div className="logotext">
                            {/* small and big change using menucollapse state */}
                            <p>{menuCollapse ? "Logo" : "Big Logo"}</p>
                        </div>
                        <div className="closemenu" onClick={menuIconClick}>
                            {/* changing menu collapse icon on click */}
                            {menuCollapse ? (
                                <FiArrowRightCircle />
                            ) : (
                                <FiArrowLeftCircle />
                            )}
                        </div>
                    </SidebarHeader>
                    <SidebarContent>
                        <Menu iconShape="square">
                            <MenuItem active={true} icon={<FiHome />}>
                                Home
                            </MenuItem>
                            <MenuItem icon={<FaList />}>Category</MenuItem>
                            <MenuItem icon={<FaRegHeart />}>Favourite</MenuItem>
                            <MenuItem icon={<RiPencilLine />}>Author</MenuItem>
                            <MenuItem icon={<BiCog />}>Settings</MenuItem>
                        </Menu>
                    </SidebarContent>
                    <SidebarFooter>
                        <Menu iconShape="square">
                            <MenuItem icon={<FiLogOut />}>Logout</MenuItem>
                        </Menu>
                    </SidebarFooter>
                </ProSidebar>
            </div>
        </>
    );
};

export default Header;

参考此博客

的示例

错误日志

` 找不到模块：错误：无法解析“D:\Rahul\Demo-ui\src\Components\Header”中的“react-pro-sidebar/dist/css/styles.css” ./src/Components/Header/Header.jsx 中的错误 17:0-47 找不到模块：错误：无法解析“D:\Rahul\Demo-ui\src\Components\Header”中的“react-pro-sidebar/dist/css/styles.css”

./src/Components/Header/Header.jsx 中的错误 34:37-47 在“react-pro-sidebar”中找不到导出“ProSidebar”（导入为“ProSidebar”）（可能导出：Menu、MenuContext、MenuItem、MenuItemFR、ProSidebarProvider、Sidebar、SubMenu、SubMenuFR、menuClasses、sidebarClasses、useProSidebar）

./src/Components/Header/Header.jsx 中的错误 36:40-53 在“react-pro-sidebar”中找不到导出“SidebarHeader”（导入为“SidebarHeader”）（可能导出：Menu、MenuContext、MenuItem、MenuItemFR、 ProSidebarProvider、侧边栏、子菜单、SubMenuFR、menuClasses、sidebarClasses、useProSidebar）

./src/Components/Header/Header.jsx 中的错误 71:39-53 在“react-pro-sidebar”中找不到导出“SidebarContent”（导入为“SidebarContent”）（可能导出：Menu、MenuContext、MenuItem、MenuItemFR、ProSidebarProvider、Sidebar、SubMenu、SubMenuFR、menuClasses、sidebarClasses、useProSidebar）

./src/Components/Header/Header.jsx 中的错误 140:39-52 在“react-pro-sidebar”中找不到导出“SidebarFooter”（导入为“SidebarFooter”）（可能导出：Menu、MenuContext、MenuItem、MenuItemFR、 ProSidebarProvider、侧边栏、子菜单、SubMenuFR、menuClasses、sidebarClasses、useProSidebar） `

Answer 1

//导入“react-pro-sidebar/dist/css/styles.css”;<- at the position you find the styles.css is not available because current version or pro-sidebar use differ file and that's name is also differ. So install that given

npm i [电子邮件受保护]