downshift-js / downshift-js/downshift

Preact build imports hooks from wrong module

Open
#1,198 6 comments 2 reactions 0 assignees View on GitHub
bug
Dominant language
JavaScript
Stars
12.3k
Forks
936
PR merge metrics
No merged PRs in 30d

Description

- `downshift` version: 6.0.6
- `node` version: 12.18.3
- `npm` (or `yarn`) version: 6.14.6

**Relevant code or config**

```javascript
import {useSelect} from 'downshift/preact';
import {h} from 'preact';

export function Select({items}) {
const {getItemProps, getMenuProps, getToggleButtonProps, isOpen, selectedItem} = useSelect({items});

return (



{selectedItem}


    {isOpen &&
    items.map((item, index) => (

  • {item}

  • ))}


);
}
```

**What you did**:

I tried using Downshift with Preact without the `preact-compat` layer. The above code is a somewhat simplified version of the `DropdownSelect` component from the [documentation](https://www.downshift-js.com/use-select).

**What happened**:

First, the Webpack build warns that it can't resolve the `useRef` import:

```
WARNING in ./node_modules/downshift/preact/dist/downshift.esm.js 3256:24-30
"export 'useRef' was not found in 'preact'
@ ./select.tsx
```

At runtime, I'm getting the following error in Chrome:

```
TypeError: Object(...) is not a function
at useEnhancedReducer (downshift.esm.js:1788)
at useControlledReducer (downshift.esm.js:1831)
at useSelect (downshift.esm.js:2460)
at d.Select [as constructor] (select.tsx:5)
at d.M [as render] (preact.module.js:1)
at $ (preact.module.js:1)
at m (preact.module.js:1)
at H (preact.module.js:1)
at $ (preact.module.js:1)
at m (preact.module.js:1)
```

**Reproduction repository**:

None yet

**Problem description**:

Investigating the issue, I found the following line in the `pract/dist/downshift.esm.js` file:

```javascript
import { cloneElement, Component, useRef, useEffect, useCallback, useReducer, useMemo } from 'preact';
```

That seems incorrect, as Preact exposes the hook functions not from the `preact` module but from `preact/hooks`.

**Suggested solution**:

The build would need to be changed to import the hooks from `preact/hooks` instead of `preact`, so the line above would instead be:

```javascript
import { cloneElement, Component } from 'preact';
import { useRef, useEffect, useCallback, useReducer, useMemo } from 'preact/hooks';
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.