downshift-js / downshift-js/downshift
Preact build imports hooks from wrong module
- 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}
-
{item}
{isOpen &&
items.map((item, index) => (
))}
);
}
```
**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
Assessment
This issue has not been assessed yet.