Next.js React组件export default函数中HTML报错，无法构建原因咨询

1. JSX语法错误（直接引发VSCode报错与构建失败） #

你在return语句里用了HTML实体字符<和>代替尖括号<和>，但JSX要求必须直接用尖括号定义React元素，实体字符会被解析成普通文本，而非有效的组件标签，这是语法层面的硬错误，直接导致编辑器报错和构建失败。

2. 错误使用Node.js核心模块fs #

你导入了Node.js的fs模块，但该组件是标记为'use client'的客户端组件，运行在浏览器环境中，浏览器不支持Node.js的核心模块，这会引发运行时错误。另外，就算是服务器端组件，fs.readFileSync也只能读取本地文件系统路径，而x.fileUrl是Bytescale返回的远程文件URL，根本无法用fs读取。

修正后的代码示例 #

'use client'
import React from 'react';
import { Uploader } from "uploader";
import { UploadButton } from "react-uploader";

const uploader = Uploader({
    apiKey: "free" // 获取生产环境API密钥请访问Bytescale
});
  
const options = { multi: true };

export default function Certificates() {
    return (
        <>
            <h1>Certificate Management</h1>
            <UploadButton 
                uploader={uploader}
                options={options}
                onComplete={files => alert(files.map(x => x.fileUrl).join("\n"))}
            >
                {({onClick}) => (
                    <button onClick={onClick}>
                        Upload Certificate...
                    </button>
                )}
            </UploadButton>
        </>
    );
}

额外说明 #

• 用<>和</>包裹多个JSX元素：React组件的return只能返回单个根元素，所以需要用Fragment（简写为<>）包裹<h1>和<UploadButton>。
• 移除fs相关代码：客户端无法使用fs，如果需要处理上传后的文件内容，应该通过HTTP请求（比如fetch）获取远程URL的内容，而非fs模块。

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