Next.js中lineicons-react组件无法正常渲染的排查求助

在Next.js框架中使用lineicons-react包的LineIcon组件，按照官方文档的方式导入后无法正常显示。

官方文档给出的导入示例：

import React from "react";
import ReactDOM from "react-dom";
import LineIcon from "lineicons-react";

function App() {
  return <LineIcon name="spinner" />;
}

出现的错误信息 #

预览页报错 #

Unhandled Runtime Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `PersonalProjects`.

TypeScript类型提示 #

'LineIcon' cannot be used as a JSX component.
  Its type 'typeof import("c:/Users/lmcre/OneDrive/Documents/GitHub/lauriecrean_nextjs/node_modules/lineicons-react/dist/types/index")' is not a valid JSX element type.

终端警告 #

✓ Compiled /_not-found in 266ms (1374 modules)
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at PersonalProjects
    at Lazy
    at div
    [...]

已完成的调试步骤 #

Part A #

• 确认导入语句与官方文档一致
• 确认lineicons-react包已成功安装
• 验证node_modules中存在LineIcon组件相关文件
• 删除.next文件夹并重启开发服务器，问题未解决
• 创建新的TestLineIcon.tsx文件测试，出现新错误：

  Unhandled Runtime Error
  Error: Unsupported Server Component type: undefined
  

Part B #

• 确认安装版本为lineicons-react@1.0.5
• 检查node_modules/lineicons-react/dist/types/index.d.ts，确认LineIcon已导出
• 使用动态导入并添加"use client"指令，终端无报错但预览页仍报错：

  Error: Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function.
  

  同时出现类型错误：

  Argument of type '() => Promise<typeof import("c:/Users/lmcre/OneDrive/Documents/GitHub/lauriecrean_nextjs/node_modules/lineicons-react/dist/types/index")>' is not assignable to parameter of type 'DynamicOptions<{}> | Loader<{}>'.
    Type '() => Promise<typeof import("c:/Users/lmcre/OneDrive/Documents/GitHub/lauriecrean_nextjs/node_modules/lineicons-react/dist/types/index")>' is not assignable to type '() => LoaderComponent<{}>'.
      Type 'Promise<typeof import("c:/Users/lmcre/OneDrive/Documents/GitHub/lauriecrean_nextjs/node_modules/lineicons-react/dist/types/index")>' is not assignable to type 'LoaderComponent<{}>'.
        Type 'typeof import("c:/Users/lmcre/OneDrive/Documents/GitHub/lauriecrean_nextjs/node_modules/lineicons-react/dist/types/index")' is not assignable to type 'ComponentType<{}> | ComponentModule<{}>'.
  
  
  Type '{ name: string; }' is not assignable to type 'IntrinsicAttributes'.
    Property 'name' does not exist on type 'IntrinsicAttributes'.
  

解决方案 #

1. 修正导入方式（区分默认/命名导出） #

官方文档的默认导入可能存在错误，尝试使用命名导入：

import { LineIcon } from "lineicons-react";

错误提示中提到“混合默认和命名导入”，说明包实际导出的是命名组件而非默认组件。

2. 标记组件为客户端组件 #

Next.js 13+的App Router默认启用服务器组件，lineicons-react依赖客户端环境，需要在使用组件的文件顶部添加'use client'指令：

'use client';
import { LineIcon } from "lineicons-react";

export default function PersonalProjects() {
  return <LineIcon name="spinner" />;
}

3. 正确使用动态导入 #

如果需要动态导入，需明确提取LineIcon组件，而非导入整个模块：

'use client';
import dynamic from 'next/dynamic';

// 动态导入并指定组件
const LineIcon = dynamic(() => 
  import('lineicons-react').then(module => module.LineIcon), 
  { ssr: false }
);

export default function TestLineIcon() {
  return <LineIcon name="spinner" />;
}

4. 升级/降级包版本 #

当前使用的1.0.5版本可能存在兼容性问题，尝试升级到最新版或降级到稳定版本：

# 升级到最新版
npm install lineicons-react@latest

# 或降级到1.0.4版本
npm install lineicons-react@1.0.4

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