小编Rom*_*man的帖子

当我尝试执行一个简单的操作时，我在 Next js 13 中遇到了一些奇怪的行为。我准备了一个最简单的例子来说明这个问题。我希望你能帮我弄清楚为什么会发生这种情况。

有 3 个组件。

页：

import {Container} from '../components/Container'
export default function index() {
  return (
    <Container>
        <Container.Window>
            <h1>12345</h1>
        </Container.Window>
    </Container>
  )
}

容器：

'use client';
import { Window } from './Window';

export const Container = ({ children }) => {
  return children;
};

Container.Window = Window;

窗户：

"use client";
export const Window = ({children})=>{
  return children
}

页面服务器组件。容器和窗口组件是客户端的。集装箱进出口窗口。

我收到此错误：

“不支持的服务器组件类型：未定义”

• 单独导入Window组件。
  有效，没有错误

• 使容器组件成为服务器组件。
  有效，没有错误

• 使页面组件成为客户端。
  有效，没有错误

但我认为第一个选择是最方便的。很想让它发挥作用

https://stackblitz.com/edit/nextjs-fwuztm?file=app%2Fpage.js,components%2FContainer.js,components%2FWindow.js - 示例

我的应用程序控制台中有很多错误。如何修复它？

接下来js 13.2/app目录

Import trace for requested module:
./node_modules/@aws-sdk/util-user-agent-node/dist-cjs/is-crt-available.js
./node_modules/@aws-sdk/util-user-agent-node/dist-cjs/index.js
./node_modules/@aws-sdk/client-cognito-identity/dist-cjs/runtimeConfig.js
./node_modules/@aws-sdk/client-cognito-identity/dist-cjs/CognitoIdentityClient.js
./node_modules/@aws-sdk/client-cognito-identity/dist-cjs/index.js
./node_modules/@aws-sdk/credential-providers/dist-cjs/fromCognitoIdentity.js
./node_modules/@aws-sdk/credential-providers/dist-cjs/index.js
./node_modules/mongoose/node_modules/mongodb/lib/deps.js
./node_modules/mongoose/node_modules/mongodb/lib/index.js
./node_modules/mongoose/lib/index.js
./node_modules/mongoose/index.js
./Total/db/connect.js
./Part/ssr/Ssr.js
./app/(pages)/profile/page.js

./node_modules/mongoose/node_modules/mongodb/lib/bson.js
Module not found: Can't resolve 'bson-ext' in 'C:\Users\79833\WebstormProjects\partApp\node_modules\mongoose\node_modules\mongodb\lib'

Import trace for requested module:
./node_modules/mongoose/node_modules/mongodb/lib/bson.js
./node_modules/mongoose/node_modules/mongodb/lib/index.js
./node_modules/mongoose/lib/index.js
./node_modules/mongoose/index.js
./Total/db/connect.js
./Part/ssr/Ssr.js
./app/(pages)/profile/page.js

./node_modules/mongoose/node_modules/mongodb/lib/deps.js
Module not found: Can't resolve 'kerberos' in 'C:\Users\79833\WebstormProjects\partApp\node_modules\mongoose\node_modules\mongodb\lib'

Import trace for requested module:
./node_modules/mongoose/node_modules/mongodb/lib/deps.js
./node_modules/mongoose/node_modules/mongodb/lib/index.js
./node_modules/mongoose/lib/index.js
./node_modules/mongoose/index.js
./Total/db/connect.js
./Part/ssr/Ssr.js
./app/(pages)/profile/page.js

./node_modules/mongoose/node_modules/mongodb/lib/deps.js
Module not found: Can't resolve '@mongodb-js/zstd' in 'C:\Users\79833\WebstormProjects\partApp\node_modules\mongoose\node_modules\mongodb\lib'

Import trace for requested module:
./node_modules/mongoose/node_modules/mongodb/lib/deps.js
./node_modules/mongoose/node_modules/mongodb/lib/index.js …

下一个js 13.2.3

Next js 不能使用 table 元素。

"use client";
export default function index() {
  return (
            <table>
                <tr>
                    <th>Company</th>
                    <th>Contact</th>
                    <th>Country</th>
                </tr>
                <tr>
                    <td>Alfreds Futterkiste</td>
                    <td>Maria Anders</td>
                    <td>Germany</td>
                </tr>
                <tr>
                    <td>Centro comercial Moctezuma</td>
                    <td>Francisco Chang</td>
                    <td>Mexico</td>
                </tr>
            </table>
  )
}

它有效，但我收到错误。

Unhandled Runtime Error

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <tr> in <table>.

我应该停止使用这个元素还是可以解决这个问题？

https://stackblitz.com/edit/nextjs-jvjltx?file=app%2Fpage.js - 示例