Next.js报错：根页面默认导出非React组件问题求助

错误信息 #

Internal error: Error: The default export is not a React Component in page: "/"

项目关键配置 #

• Next.js 版本：14.2.14
• React 版本：18.3.1
• 集成栈：React-Redux、Tailwind CSS

相关代码 #

layout.js #

import './globals.css';
import { Provider } from 'react-redux';
import { store } from '@/store/store';

export const metadata = {
  title: "Hall of Game",
  description: "Generated by create next app",
};

export const RootLayout = ({ children }) => {
  return (
    <html lang="en">
      <body>
        <Provider store={store}>
          {children}
        </Provider>
      </body>
    </html>
  );
}

page.js #

"use client";
import React from "react";
import { useSelector } from "react-redux";
import Header from "@/features/Header/Header";
import Filters from "@/features/Filters/Filters";
import GamesList from "@/features/Games/GamesList/GamesList";
import GameDetails from "@/features/Games/GameDetails/GameDetails";
import { selectCurrentGame } from "@/features/Games/gamesSlice";

const Home = () => {
  const selectedGame = useSelector(selectCurrentGame);
  return (
    <div>
      <Header />
      <main>
        <section>
          <Filters />
        </section>
        <section>
          {selectedGame ? <GameDetails game={selectedGame}/> : <GamesList />}
        </section>
      </main>
    </div>
  );
};

export default Home;

已完成排查步骤 #

• 确认page.js已存在export default Home默认导出
• 清理缓存、重装node_modules后重试npm run dev和next build
• 验证page.js路径为src/app/page.js，符合App Router规范
• 尝试重置并重装React相关依赖

观察到的现象 #

• 使用create-next-app默认生成的layout/page文件时无报错，应用正常运行
• 错误出现在近期安装/更新依赖之后
• 查阅Next.js官方文档及常见错误文章未找到有效解决方案

package.json 配置 #

{
  "name": "hall-of-game",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@reduxjs/toolkit": "^2.2.7",
    "next": "^14.2.14",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.3.0",
    "react-redux": "^9.1.2"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.25.7",
    "@babel/preset-react": "^7.25.7",
    "eslint": "^8",
    "eslint-config-next": "14.2.14",
    "postcss": "^8",
    "tailwindcss": "^3.4.1"
  }
}

排查与解决建议 #

1. 排查子组件导出问题
   首页本身导出没问题，大概率是引入的子组件存在导出错误：

   • 逐个检查Header、Filters、GamesList、GameDetails组件，确认是否正确使用export default ComponentName，或命名导出时导入方式是否匹配
   • 临时注释所有子组件，让page.js仅返回基础内容（如<div>Test</div>），若报错消失，再逐个恢复组件定位问题

2. 检查Redux配置完整性

   • 验证@/store/store.js是否正确创建并导出store，无语法错误
   • 检查gamesSlice.js中selectCurrentGame选择器的定义与导出是否正常
   • 暂时移除layout.js中的Redux Provider包裹，直接返回children，确认是否因Redux集成导致组件识别异常

3. 修复依赖兼容性问题

   • 尝试降级react-redux到9.1.1、@reduxjs/toolkit到2.2.6，排查版本冲突
   • 删除不必要的dev依赖（如@babel/preset-env和@babel/preset-react），Next.js自带Babel配置，手动添加可能引发冲突

4. 彻底清理Next.js缓存
   执行next clean命令彻底清理构建缓存，再重新运行npm run dev或next build

5. 检查文件与路径规范

   • 确认所有导入路径的文件名大小写与实际文件一致（Windows系统不敏感，但部署环境可能触发错误）
   • 运行npm run lint检查代码是否存在隐性语法错误或规范问题

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