Experimental AppDir breaks PrimeReact MegaMenu

Open chrishj59 opened this issue 3 years ago • 0 comments

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System: Platform: darwin Arch: x64 Version: Darwin Kernel Version 22.1.0: Sun Oct 9 20:14:54 PDT 2022; root:xnu-8792.41.9~2/RELEASE_X86_64 Binaries: Node: 16.13.1 npm: 8.19.1 Yarn: 1.22.15 pnpm: 6.11.0 Relevant packages: next: 13.0.3-canary.4 eslint-config-next: 13.0.2 react: 18.2.0 react-dom: 18.2.0

What browser are you using? (if relevant)

106.0.5 (64-bit)

How are you deploying your application? (if relevant)

onlocal lap top

Describe the Bug

I need to have the rootLayout and NavBar as client side as I am using PrimeReact as the UI framework.

The 'use client' directive is not working.

Layout.tsx

import { NavBar } from './components/navbar';

('use client');
export default function RootLayout({
	children,
}: {
	children: React.ReactNode;
}) {
	return (
		<html>
			<head></head>
			<body>
				<NavBar />
				{children}
			</body>
		</html>
	);
}

NavBar.tsx top part

import Link from 'next/link';
import { useRouter } from 'next/router';

'use client';
export const NavBar = () => {
	const router = useRouter();
	return (
		<ul>
			<li>
				<Link href="/">Home</Link>
			</li>
			<li>
				<Link href="/user/login">Login</Link>
			</li>
			<li>
				<Link href="/user/signup">Signup</Link>
			</li>
		</ul>
	);
};



### Expected Behavior

Use of the directive 'use client' results in RootLayout and NavBar being rendered as client side not server side

### Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/chrishj59/next13LayoutDemo

### To Reproduce

Use the load initial page - the error is displayed in the node console and web console

Nov 12 '22 08:11 chrishj59