[Autocomplete] Error: (0 , _mui_base_useAutocomplete__WEBPACK_IMPORTED_MODULE_2__.useAutocomplete) is not a function

[firmart]

Steps to reproduce

Link to live example: link

Steps:

1. npm run dev

Current behavior

Expected behavior

No error.

Context

Use useAutocomplete to build a Search component. However, the example provided in the doc fails with Next.js.

Your environment

npx @mui/envinfo

 Browser : Chrome

  Output from `npx @mui/envinfo` goes here.

  System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
  Binaries:
    Node: 21.6.2 - ~/.nvm/versions/node/v21.6.2/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v21.6.2/bin/npm
    pnpm: 8.15.4 - ~/.local/share/pnpm/pnpm
  Browsers:
    Chrome: 123.0.6312.105
  npmPackages:
    @mui/base: 5.0.0-beta.58 => 5.0.0-beta.58
    @types/react: ^18.3.5 => 18.3.5
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1
    typescript: ^5.6.2 => 5.6.2

Search keywords: useAutocomplete, next.js

[michaldudak]

The Search in your example should be defined as a client component. Adding 'use client'; at the top solves the issue.

[github-actions[bot]]

👋 Thanks for using this project!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support with Base UI please check out https://mui.com/base-ui/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others. If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[mj12albert]

The Search in your example should be defined as a client component. Adding 'use client'; at the top solves the issue.

👍 demo: https://codesandbox.io/p/devbox/use-autocomplete-bug-forked-5ts89q