algolia / algolia/autocomplete
Next.js 13 with React 18 Render Error
- Dominant language
- TypeScript
- Stars
- 5.3k
- Forks
- 341
- Avg merge
- 3d 1h
- Merged PRs (30d)
- 5
Description
## Description
Using autocomplete in NextJs 13 with the newest react 18 version is causing errors

## Reproduction
// using the default example from the api
```
import React, { useMemo } from "react"
import { createElement, Fragment, useEffect, useRef, useState } from "react"
import { render } from "react-dom"
import { usePagination, useSearchBox } from "react-instantsearch-hooks"
import { autocomplete, AutocompleteOptions } from "@algolia/autocomplete-js"
import { BaseItem } from "@algolia/autocomplete-core"
import { createLocalStorageRecentSearchesPlugin } from "@algolia/autocomplete-plugin-recent-searches"
import "@algolia/autocomplete-theme-classic"
type AutocompleteProps = Partial> & {
className?: string
}
type SetInstantSearchUiStateOptions = {
query: string
}
export function Autocomplete({
className,
...autocompleteProps
}: AutocompleteProps) {
const autocompleteContainer = useRef(null)
const { query, refine: setQuery } = useSearchBox()
const { refine: setPage } = usePagination()
const [instantSearchUiState, setInstantSearchUiState] =
useState({ query })
const plugins = useMemo(() => {
const recentSearches = createLocalStorageRecentSearchesPlugin({
key: "instantsearch",
limit: 5,
transformSource({ source }) {
return {
...source,
onSelect({ item }) {
setInstantSearchUiState({ query: item.label })
},
}
},
})
return [recentSearches]
}, [])
useEffect(() => {
setQuery(instantSearchUiState.query)
setPage(0)
}, [instantSearchUiState])
useEffect(() => {
if (!autocompleteContainer.current) {
return
}
const autocompleteInstance = autocomplete({
...autocompleteProps,
container: autocompleteContainer.current,
initialState: { query },
onReset() {
setInstantSearchUiState({ query: "" })
},
onSubmit({ state }) {
setInstantSearchUiState({ query: state.query })
},
onStateChange({ prevState, state }) {
if (prevState.query !== state.query) {
setInstantSearchUiState({
query: state.query,
})
}
},
renderer: { createElement, Fragment, render },
plugins,
})
return () => autocompleteInstance.destroy()
}, [plugins])
return
}
```
**Steps**
install latest next js 18 with src structure, not with app structure
add autocomplete plugins
## Expected behavior
shouldn't throw any errors
only happens with autocomplete implemented
## Environment
- OS: [ macOS ]
- Browser: [e.g. Chrome, Brave, Firefox]
- Autocomplete version: [e.g. 1.0.0]
Contributor guide
Research direction
Start by reproducing the supplied Autocomplete component in a Next.js 13 project using the src structure and the listed autocomplete plugins. Inspect the reported render error and compare behavior with and without autocomplete; done means the component renders without throwing errors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100