"TypeError: react.createContext" is not a function with Next.js 13 and Radix UI-CodePudding

I'm using a Radix UI select component in Next.js 13 with Typescript and it throws this error: TypeError: $9g4ps$react.createContext is not a function

Radix components have worked for me before in other projects, am I doing something wrong here?

The file (literally copy pasted from the template):

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

CodePudding user response：

Next.js 13 uses React Server Components by default, which don't support any sort of state.

To use React.Context, add the "use client"; directive at the top of the file.