downshift-js/downshift

Preact build doesn't work due to incorrect Preact imports

Open

#1430 opened on Oct 27, 2022

View on GitHub
 (6 comments) (0 reactions) (0 assignees)JavaScript (11,761 stars) (980 forks)batch import
bughelp wanted

Description

  • 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';

Contributor guide

Tech stack
javascriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
JavaScriptES module importsReact/Preact basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85
Research direction
Locate the source file for the Preact build (likely `src/preact/index.js` or a similar entry point). Check the build configuration (e.g., `rollup.config.js` or `scripts/build.js`) to understand how the ESM bundle is generated. The fix involves splitting the import from 'preact' to import hooks from 'preact/hooks' instead. After making the change, rebuild the distribution files to verify the fix. Ensure that the built `preact/dist/downshift.esm.js` reflects the corrected imports.