Preact build doesn't work due to incorrect Preact imports

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

I believe this is related to #1198.

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

@silviuaavram

@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?

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.

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

@silviuaavram

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

kentcdodds/kcd-scripts#235

Navigation Menu

Repository navigation

Preact build doesn't work due to incorrect Preact imports #1430

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Preact build doesn't work due to incorrect Preact imports #1430

Description

Activity

tomtaylor commented on Oct 27, 2022

silviuaavram commented on Nov 10, 2022

tomtaylor commented on Nov 16, 2022

silviuaavram commented on Nov 23, 2022

SaiMaheshwarReddy commented on Jul 8, 2023

SaiMaheshwarReddy commented on Jul 8, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions