Preact build doesn't work due to incorrect Preact imports

[tomtaylor]

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

Relevant code or config

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.<computed> (/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:

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

Instead of:

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

[tomtaylor]

I believe this is related to #1198.

[silviuaavram]

Hi! Can you create a PR with a fix? I'd be happy to review and merge it. Thanks!

[tomtaylor]

@silviuaavram I'd love to, but like this commenter, I don't understand the build process enough to know how this is being generated. Can you give any pointers?

[silviuaavram]

The build uses rollup. For the preact side of things, I don't have any more information, unfortunately.

The way to go, probably, would be to make a fix, then npm run build, use the build result in the preact project you have locally (or link downshift locally using package json), and check if it works.

[SaiMaheshwarReddy]

I started working on this, but this needs a fix in kcd-scripts

[SaiMaheshwarReddy]

raised a PR in kcd-scripts, @silviuaavram @kentcdodds pls review and let me know

https://github.com/kentcdodds/kcd-scripts/pull/235