在Next.js中使用React Circular Progressbar遇类型错误求助

问题详情 #

已安装 react-circular-progressbar 组件并编写相关代码，但运行时抛出服务端错误：

Server Error
TypeError: Object prototype may only be an Object or null: undefined

相关代码 #

MyCourses 组件

import React from 'react';
import "../css/myCourses.css"
import { CircularProgressbar } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';

const MyCourses = () => {
    const percentage = 66;
    return (
        <>
            <div className='mt-3'>
                <CircularProgressbar value={percentage} text={`${percentage}%`} />
            </div>
        </>
    );
}

export default MyCourses;

Overview 页面（调用组件）

import React from 'react';
import "../css/overview.css"
import Link from 'next/link';
import Image from 'next/image';
import search from "../../public/images/search.svg"
import MyCourses from '../components/myCourses';
import Planning from '../components/planning';

const Overview = () => {
    return (
        <>
            <div className='overview_container'>
                <p>Hello <b>BRUNO</b>, welcome back!</p>
                <div className='d-flex justify-content-between align-items-baseline'>
                    <div className='heading d-flex align-items-baseline justify-content-between'>
                        <p className='me-4'>My Courses</p>
                        <Link href={'/overview'}>View All</Link>
                    </div>
                    <div className='d-flex'>
                        <Image 
                            src={search}
                            alt="search"
                        />
                        <input className='ms-3' type="text" placeholder='Search...' />
                    </div>
                </div>
                <MyCourses/>
                <Planning/>
            </div>
        </>
    );
}

export default Overview;

解决方案 #

1. 修复版本兼容性 #

该错误常因 react-circular-progressbar 新版本与 Next.js SSR 机制冲突导致，降级到稳定兼容版本：

npm install react-circular-progressbar@2.1.0
# 或使用 yarn
yarn add react-circular-progressbar@2.1.0

2. 强制客户端渲染组件 #

如果版本降级无效，将 MyCourses 设置为仅客户端渲染，避免服务端执行时出错：
修改 Overview 页面的组件导入代码：

// 替换原 import MyCourses from '../components/myCourses';
import dynamic from 'next/dynamic';
const MyCourses = dynamic(() => import('../components/myCourses'), { ssr: false });

3. 重置依赖环境 #

删除现有依赖文件后重新安装，确保依赖完整性：

rm -rf node_modules package-lock.json yarn.lock
npm install

4. 验证文件路径 #

确认 ../components/myCourses 路径正确，文件命名大小写与导入语句一致（Next.js 对路径大小写敏感）。

内容的提问来源于stack exchange，提问作者Konul Memmedova