algolia / algolia/autocomplete

Next.js 13 with React 18 Render Error

Open
#1,090 2 comments 0 reactions 0 assignees View on GitHub
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

![Bildschirmfoto 2023-02-12 um 18 05 18](https://user-images.githubusercontent.com/8994411/218325573-6f247c06-03a0-4d56-86ac-60ece31ddb84.png)

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.