“TypeError：react.createContext”不是 Next.js 13 和 Radix UI 的函数

Question

我在 Next.js 13 中使用带有 Typescript 的 Radix UI 选择组件，它抛出此错误：TypeError: $9g4ps$react.createContext is not a function

Radix 组件之前在其他项目中为我工作过，我在这里做错了什么吗？

该文件（实际上是从模板复制粘贴的）：

import * as Select from '@radix-ui/react-select';

export default () => (

    <Select.Root>

      <Select.Trigger>
        <Select.Value />
        <Select.Icon />
      </Select.Trigger>

      <Select.Portal>

        <Select.Content>
          <Select.ScrollUpButton />
          <Select.Viewport>

            <Select.Item>
              <Select.ItemText />
              <Select.ItemIndicator />
            </Select.Item>

          </Select.Viewport>
          <Select.ScrollDownButton />
        </Select.Content>

      </Select.Portal>
    </Select.Root>
)

Answer 1

Next.js 13 默认使用 React Server Components，它不支持任何类型的状态。

要使用React.Context，请"use client";在文件顶部添加指令。