Question 72474 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Next.js cannot use 'use client' on layout element – Reactjs

I am trying to get the current page from the layout.txt file but when I put ‘use client’ at top of the page I get the following errors:

Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
    parseModel react-server-dom-webpack-client.browser.development.js:33
    resolveModule react-server-dom-webpack-client.browser.development.js:749
    processFullRow react-server-dom-webpack-client.browser.development.js:825
    processBinaryChunk react-server-dom-webpack-client.browser.development.js:869
    progress react-server-dom-webpack-client.browser.development.js:1476
    promise callback*progress react-server-dom-webpack-client.browser.development.js:1477
    promise callback*startReadingFromStream react-server-dom-webpack-client.browser.development.js:1484
    createFromReadableStream react-server-dom-webpack-client.browser.development.js:1489
    useInitialServerResponse app-index.js:135
    ServerRoot app-index.js:145
    renderWithHooks react-dom.development.js:10398
    mountIndeterminateComponent react-dom.development.js:15475
    beginWork$1 react-dom.development.js:17052
    beginWork react-dom.development.js:25615
    performUnitOfWork react-dom.development.js:24465
    workLoopSync react-dom.development.js:24181
    renderRootSync react-dom.development.js:24146
    performConcurrentWorkOnRoot react-dom.development.js:23250
    workLoop index.js:10
    flushWork index.js:10
    performWorkUntilDeadline index.js:10
    853 index.js:10
    853 index.js:10
    __nccwpck_require__ index.js:19
    833 index.js:19
    __nccwpck_require__ index.js:19
    <anonymous> index.js:19
    <anonymous> index.js:19
    NextJS 4
    <anonymous> react-dom.development.js:27
    <anonymous> react-dom.development.js:35859
    NextJS 4
    <anonymous> index.js:37
    NextJS 4
    <anonymous> client.js:3
    NextJS 4
    <anonymous> app-index.js:9
    NextJS 4
    <anonymous> app-next-dev.js:5
    appBootstrap app-bootstrap.js:52
    loadScriptsInSequence app-bootstrap.js:18
    appBootstrap app-bootstrap.js:51
    <anonymous> app-next-dev.js:4
    NextJS 7
react-server-dom-webpack-client.browser.development.js:33
Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
    parseModel react-server-dom-webpack-client.browser.development.js:33
    resolveModule react-server-dom-webpack-client.browser.development.js:749
    processFullRow react-server-dom-webpack-client.browser.development.js:825
    processBinaryChunk react-server-dom-webpack-client.browser.development.js:869
    progress react-server-dom-webpack-client.browser.development.js:1476
    promise callback*progress react-server-dom-webpack-client.browser.development.js:1477
    promise callback*startReadingFromStream react-server-dom-webpack-client.browser.development.js:1484
    createFromReadableStream react-server-dom-webpack-client.browser.development.js:1489
    useInitialServerResponse app-index.js:135
    ServerRoot app-index.js:145
    renderWithHooks react-dom.development.js:10398
    mountIndeterminateComponent react-dom.development.js:15475
    beginWork$1 react-dom.development.js:17052
    beginWork react-dom.development.js:25615
    performUnitOfWork react-dom.development.js:24465
    workLoopSync react-dom.development.js:24181
    renderRootSync react-dom.development.js:24146
    performConcurrentWorkOnRoot react-dom.development.js:23250
    workLoop index.js:10
    flushWork index.js:10
    performWorkUntilDeadline index.js:10
    853 index.js:10
    853 index.js:10
    __nccwpck_require__ index.js:19
    833 index.js:19
    __nccwpck_require__ index.js:19
    <anonymous> index.js:19
    <anonymous> index.js:19
    NextJS 4
    <anonymous> react-dom.development.js:27
    <anonymous> react-dom.development.js:35859
    NextJS 4
    <anonymous> index.js:37
    NextJS 4
    <anonymous> client.js:3
    NextJS 4
    <anonymous> app-index.js:9
    NextJS 4
    <anonymous> app-next-dev.js:5
    appBootstrap app-bootstrap.js:52
    loadScriptsInSequence app-bootstrap.js:18
    appBootstrap app-bootstrap.js:51
    <anonymous> app-next-dev.js:4
    NextJS 7
react-server-dom-webpack-client.browser.development.js:33
The above error occurred in the <ServerRoot> component:

ServerRoot@webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:147:25
RSCComponent
Root@webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:164:25

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. app-index.js:23:21
Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
    parseModel react-server-dom-webpack-client.browser.development.js:33
    resolveModule react-server-dom-webpack-client.browser.development.js:749
    processFullRow react-server-dom-webpack-client.browser.development.js:825
    processBinaryChunk react-server-dom-webpack-client.browser.development.js:869
    progress react-server-dom-webpack-client.browser.development.js:1476
    promise callback*progress react-server-dom-webpack-client.browser.development.js:1477
    promise callback*startReadingFromStream react-server-dom-webpack-client.browser.development.js:1484
    createFromReadableStream react-server-dom-webpack-client.browser.development.js:1489
    useInitialServerResponse app-index.js:135
    ServerRoot app-index.js:145
    renderWithHooks react-dom.development.js:10398
    mountIndeterminateComponent react-dom.development.js:15475
    beginWork$1 react-dom.development.js:17052
    beginWork react-dom.development.js:25615
    performUnitOfWork react-dom.development.js:24465
    workLoopSync react-dom.development.js:24181
    renderRootSync react-dom.development.js:24146
    performConcurrentWorkOnRoot react-dom.development.js:23250
    workLoop index.js:10
    flushWork index.js:10
    performWorkUntilDeadline index.js:10
    853 index.js:10
    853 index.js:10
    __nccwpck_require__ index.js:19
    833 index.js:19
    __nccwpck_require__ index.js:19
    <anonymous> index.js:19
    <anonymous> index.js:19
    NextJS 4
    <anonymous> react-dom.development.js:27
    <anonymous> react-dom.development.js:35859
    NextJS 4
    <anonymous> index.js:37
    NextJS 4
    <anonymous> client.js:3
    NextJS 4
    <anonymous> app-index.js:9
    NextJS 4
    <anonymous> app-next-dev.js:5
    appBootstrap app-bootstrap.js:52
    loadScriptsInSequence app-bootstrap.js:18
    appBootstrap app-bootstrap.js:51
    <anonymous> app-next-dev.js:4
    NextJS 7
react-server-dom-webpack-client.browser.development.js:33
TypeError: n.getElementsByTagName(...)[0] is undefined
instana.js:1:316

This is the code I am using in the layout.txt file:

'use client'

import './styles/globals.css'
import React from "react";
import Header from "@/app/components/organisms/Header";
import Sidebar from "@/app/components/organisms/Sidebar";
import {usePathname} from "next/navigation";

export const metadata = {
    title: 'App',
    description: 'Generated by create next app',
}

export default function RootLayout({children,}: { children: React.ReactNode }) {

    if (['/login', '/register'].includes(usePathname())) {
        return (
            <>
                {children}
            </>
        );
    }

    return (
        <html lang="en" className={'h-full'}>
        <body className={'h-full flex flex-col bg-primary-default'}>
            <Header/>
            <div className="h-full flex flex-row flex-1">
                <Sidebar/>
                <main className={'flex-grow'}>{children}</main>
            </div>
        </body>
        </html>
    )
}

I tried different things to find what was the problem and when I do remove the if function ad ‘use client’ it disapears… I did not find any other ways to do what I want to do.

Tags:

2

Answers


  1. 0

    Instead of this

    export default function RootLayout({children,}: { children: React.ReactNode }) {}

    try this

    function RootLayout({children,}: { children: React.ReactNode }) {}

export default RootLayout

    this is a bug in some versions

    Login or Signup to reply.
  2. 0

    Try updating your Next.js (this worked for me):

    npm install next@latest

    or

    yarn add next@latest
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search