Next.js集成shadcn暗黑模式报错：无法解析lucide-react模块

1. 重新安装lucide-react并清理缓存 #

• 卸载现有lucide-react包：npm uninstall lucide-react
• 清理npm缓存：npm cache clean --force
• 重新安装适配shadcn的官方包：npm install lucide-react
  注意：不要安装lucide-react-icons或拼写错误的lucid react，shadcn默认依赖的是lucide-react。

2. 修正图标导入路径 #

检查代码里的图标导入方式，必须使用shadcn推荐的顶层导入，不要指定包内部的深层路径：

import { Check } from "lucide-react";

dist/cjs/icons/check这类路径是包的内部结构，不同版本可能会变动，直接用顶层导入才是稳定的方式。

3. 重新初始化shadcn配置 #

如果是shadcn组件自动引入的图标路径出错，重新运行初始化命令确认图标库选择：

npx shadcn-ui@latest init

在交互流程里确认图标库选的是lucide-react，避免选错其他图标库导致路径不匹配。

4. 检查Next.js模块解析配置 #

打开next.config.js，确保没有自定义的resolve配置干扰模块查找：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  // 移除可能错误的alias或resolve配置
}

module.exports = nextConfig

5. 彻底重装依赖 #

• 删除node_modules文件夹：Windows用rmdir /s /q node_modules，Mac/Linux用rm -rf node_modules
• 删除package-lock.json文件
• 重新安装所有依赖：npm install

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