downshift-js / downshift-js/downshift

Preact build doesn't work due to incorrect Preact imports

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

Description

- `downshift` version: 7.0.0
- `node` version: 16.13.2
- `npm` (or `yarn`) version: 8.19.2

**Relevant code or config**

```javascript
import Downshift from "downshift/preact";
```

**What you did**:

Imported the Preact build of Downshift.

**What happened**:

```
$ node build.js
✘ [ERROR] No matching export in "node_modules/preact/dist/preact.module.js" for import "useRef"

node_modules/downshift/preact/dist/downshift.esm.js:1:34:
1 │ import { Component, cloneElement, useRef, useEffect, useCallback, useLayoutEffect, useReducer, useMemo } from 'prea...
╵ ~~~~~~

✘ [ERROR] No matching export in "node_modules/preact/dist/preact.module.js" for import "useEffect"

node_modules/downshift/preact/dist/downshift.esm.js:1:42:
1 │ import { Component, cloneElement, useRef, useEffect, useCallback, useLayoutEffect, useReducer, useMemo } from 'prea...
╵ ~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/preact/dist/preact.module.js" for import "useCallback"

node_modules/downshift/preact/dist/downshift.esm.js:1:53:
1 │ import { Component, cloneElement, useRef, useEffect, useCallback, useLayoutEffect, useReducer, useMemo } from 'prea...
╵ ~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/preact/dist/preact.module.js" for import "useLayoutEffect"

node_modules/downshift/preact/dist/downshift.esm.js:1:66:
1 │ ...rt { Component, cloneElement, useRef, useEffect, useCallback, useLayoutEffect, useReducer, useMemo } from 'preact';
╵ ~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/preact/dist/preact.module.js" for import "useReducer"

node_modules/downshift/preact/dist/downshift.esm.js:1:83:
1 │ ...rt { Component, cloneElement, useRef, useEffect, useCallback, useLayoutEffect, useReducer, useMemo } from 'preact';
╵ ~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/preact/dist/preact.module.js" for import "useMemo"

node_modules/downshift/preact/dist/downshift.esm.js:1:95:
1 │ ...rt { Component, cloneElement, useRef, useEffect, useCallback, useLayoutEffect, useReducer, useMemo } from 'preact';
╵ ~~~~~~~

6 errors
/Users/tom/projects/breakroom/site/assets/node_modules/esbuild/lib/main.js:1566
let error = new Error(`${text}${summary}`);
^

Error: Build failed with 6 errors:
node_modules/downshift/preact/dist/downshift.esm.js:1:34: ERROR: No matching export in "node_modules/preact/dist/preact.module.js" for import "useRef"
node_modules/downshift/preact/dist/downshift.esm.js:1:42: ERROR: No matching export in "node_modules/preact/dist/preact.module.js" for import "useEffect"
node_modules/downshift/preact/dist/downshift.esm.js:1:53: ERROR: No matching export in "node_modules/preact/dist/preact.module.js" for import "useCallback"
node_modules/downshift/preact/dist/downshift.esm.js:1:66: ERROR: No matching export in "node_modules/preact/dist/preact.module.js" for import "useLayoutEffect"
node_modules/downshift/preact/dist/downshift.esm.js:1:83: ERROR: No matching export in "node_modules/preact/dist/preact.module.js" for import "useReducer"
...
at failureErrorWithLog (/Users/tom/projects/breakroom/site/assets/node_modules/esbuild/lib/main.js:1566:15)
at /Users/tom/projects/breakroom/site/assets/node_modules/esbuild/lib/main.js:1024:28
at runOnEndCallbacks (/Users/tom/projects/breakroom/site/assets/node_modules/esbuild/lib/main.js:1438:61)
at buildResponseToResult (/Users/tom/projects/breakroom/site/assets/node_modules/esbuild/lib/main.js:1022:7)
at /Users/tom/projects/breakroom/site/assets/node_modules/esbuild/lib/main.js:1134:14
at responseCallbacks. (/Users/tom/projects/breakroom/site/assets/node_modules/esbuild/lib/main.js:671:9)
at handleIncomingPacket (/Users/tom/projects/breakroom/site/assets/node_modules/esbuild/lib/main.js:726:9)
at Socket.readFromStdout (/Users/tom/projects/breakroom/site/assets/node_modules/esbuild/lib/main.js:647:7)
at Socket.emit (node:events:390:28)
at addChunk (node:internal/streams/readable:315:12) {
errors: [
{
detail: undefined,
id: '',
location: {
column: 34,
file: 'node_modules/downshift/preact/dist/downshift.esm.js',
length: 6,
line: 1,
lineText: "import { Component, cloneElement, useRef, useEffect, useCallback, useLayoutEffect, useReducer, useMemo } from 'preact';",
namespace: '',
suggestion: ''
},
notes: [],
pluginName: '',
text: 'No matching export in "node_modules/preact/dist/preact.module.js" for import "useRef"'
},
{
detail: undefined,
id: '',
location: {
column: 42,
file: 'node_modules/downshift/preact/dist/downshift.esm.js',
length: 9,
line: 1,
lineText: "import { Component, cloneElement, useRef, useEffect, useCallback, useLayoutEffect, useReducer, useMemo } from 'preact';",
namespace: '',
suggestion: ''
},
notes: [],
pluginName: '',
text: 'No matching export in "node_modules/preact/dist/preact.module.js" for import "useEffect"'
},
{
detail: undefined,
id: '',
location: {
column: 53,
file: 'node_modules/downshift/preact/dist/downshift.esm.js',
length: 11,
line: 1,
lineText: "import { Component, cloneElement, useRef, useEffect, useCallback, useLayoutEffect, useReducer, useMemo } from 'preact';",
namespace: '',
suggestion: ''
},
notes: [],
pluginName: '',
text: 'No matching export in "node_modules/preact/dist/preact.module.js" for import "useCallback"'
},
{
detail: undefined,
id: '',
location: {
column: 66,
file: 'node_modules/downshift/preact/dist/downshift.esm.js',
length: 15,
line: 1,
lineText: "import { Component, cloneElement, useRef, useEffect, useCallback, useLayoutEffect, useReducer, useMemo } from 'preact';",
namespace: '',
suggestion: ''
},
notes: [],
pluginName: '',
text: 'No matching export in "node_modules/preact/dist/preact.module.js" for import "useLayoutEffect"'
},
{
detail: undefined,
id: '',
location: {
column: 83,
file: 'node_modules/downshift/preact/dist/downshift.esm.js',
length: 10,
line: 1,
lineText: "import { Component, cloneElement, useRef, useEffect, useCallback, useLayoutEffect, useReducer, useMemo } from 'preact';",
namespace: '',
suggestion: ''
},
notes: [],
pluginName: '',
text: 'No matching export in "node_modules/preact/dist/preact.module.js" for import "useReducer"'
},
{
detail: undefined,
id: '',
location: {
column: 95,
file: 'node_modules/downshift/preact/dist/downshift.esm.js',
length: 7,
line: 1,
lineText: "import { Component, cloneElement, useRef, useEffect, useCallback, useLayoutEffect, useReducer, useMemo } from 'preact';",
namespace: '',
suggestion: ''
},
notes: [],
pluginName: '',
text: 'No matching export in "node_modules/preact/dist/preact.module.js" for import "useMemo"'
}
],
warnings: []
}
```

**Suggested solution**:

I believe the import at the top of `preact/dist/downshift.esm.js` should be:

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

Instead of:

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

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.