Next.js无法在布局元素上使用“use client”

ibrsph3r  于 2023-04-30  发布在  其他
关注(0)|答案(2)|浏览(252)

我正在尝试从布局中获取当前页面。txt文件，但当我把'使用客户端'在页面的顶部，我得到以下错误：

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

这是我在布局中使用的代码。txt文件：

'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>
    )
}

我尝试了不同的方法来找到问题所在，当我删除if函数广告‘使用客户端‘时，它就消失了。我找不到其他方法去做我想做的事

next.js

2条答案

按热度按时间
csga3l58

csga3l581#

而不是这个

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

试试这个

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

export default RootLayout

这是某些版本中的错误

赞(0）分享  回复(0）举报  2023-04-30
s2j5cfk0

s2j5cfk02#

尝试更新您的Next。js（这对我很有效）：

npm install next@latest

或

yarn add next@latest
赞(0）分享  回复(0）举报  2023-04-30
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com