I’m hoping you can help me because this is driving me mad. Making a react redux web app that I’ve set up using Next.js app-router with javascript. I feel like I have exhausted all troubleshooting suggestions. Is there something that has worked for one of you?
(see below for what I tried)
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;
I’ve got export default Home at the bottom of page.js. I’ve removed node modules then re-installed. I have all the latest for next, react & react-rom in package.json. I even tried reverting to the out of the box code for layout.js & page.js that I saw render initially but it’s still returning the error.