import Downshift from 'downshift' returns a commonJs module

[guillaumewttj]

• downshift version: ^7.6.0
• node version: v18.16.0
• npm (or yarn) version: 1.22.19

Relevant code or config

In a index.mjs file:

import Downshift from "downshift";

console.debug(Downshift)

What you did:

Executing the module file:

node index.mjs

What happened:

All the exports of the package are returned:

{
  default: [Function: Downshift] {
    defaultProps: {
      defaultHighlightedIndex: null,
      defaultIsOpen: false,
      getA11yStatusMessage: [Function: getA11yStatusMessage$1],
      itemToString: [Function: itemToString],
      onStateChange: [Function: noop],
      onInputValueChange: [Function: noop],
      onUserAction: [Function: noop],
      onChange: [Function: noop],
      onSelect: [Function: noop],
      onOuterClick: [Function: noop],
      selectedItemChanged: [Function: selectedItemChanged],
      environment: {},
      stateReducer: [Function: stateReducer],
      suppressRefError: false,
      scrollIntoView: [Function: scrollIntoView]
    },
    stateChangeTypes: [Object: null prototype] {
      unknown: '__autocomplete_unknown__',
      mouseUp: '__autocomplete_mouseup__',
      itemMouseEnter: '__autocomplete_item_mouseenter__',
      keyDownArrowUp: '__autocomplete_keydown_arrow_up__',
      keyDownArrowDown: '__autocomplete_keydown_arrow_down__',
      keyDownEscape: '__autocomplete_keydown_escape__',
      keyDownEnter: '__autocomplete_keydown_enter__',
      keyDownHome: '__autocomplete_keydown_home__',
      keyDownEnd: '__autocomplete_keydown_end__',
      clickItem: '__autocomplete_click_item__',
      blurInput: '__autocomplete_blur_input__',
      changeInput: '__autocomplete_change_input__',
      keyDownSpaceButton: '__autocomplete_keydown_space_button__',
      clickButton: '__autocomplete_click_button__',
      blurButton: '__autocomplete_blur_button__',
      controlledPropUpdatedSelectedItem: '__autocomplete_controlled_prop_updated_selected_item__',
      touchEnd: '__autocomplete_touchend__'
    },
    propTypes: {
      children: [Function],
      defaultHighlightedIndex: [Function],
      defaultIsOpen: [Function],
      initialHighlightedIndex: [Function],
      initialSelectedItem: [Function],
      initialInputValue: [Function],
      initialIsOpen: [Function],
      getA11yStatusMessage: [Function],
      itemToString: [Function],
      onChange: [Function],
      onSelect: [Function],
      onStateChange: [Function],
      onInputValueChange: [Function],
      onUserAction: [Function],
      onOuterClick: [Function],
      selectedItemChanged: [Function],
      stateReducer: [Function],
      itemCount: [Function],
      id: [Function],
      environment: [Function],
      suppressRefError: [Function],
      scrollIntoView: [Function],
      selectedItem: [Function],
      isOpen: [Function],
      inputValue: [Function],
      highlightedIndex: [Function],
      labelId: [Function],
      inputId: [Function],
      menuId: [Function],
      getItemId: [Function]
    }
  },
  resetIdCounter: [Function: resetIdCounter],
  useCombobox: [Function: useCombobox] {
    stateChangeTypes: [Object: null prototype] {
      InputKeyDownArrowDown: '__input_keydown_arrow_down__',
      InputKeyDownArrowUp: '__input_keydown_arrow_up__',
      InputKeyDownEscape: '__input_keydown_escape__',
      InputKeyDownHome: '__input_keydown_home__',
      InputKeyDownEnd: '__input_keydown_end__',
      InputKeyDownPageUp: '__input_keydown_page_up__',
      InputKeyDownPageDown: '__input_keydown_page_down__',
      InputKeyDownEnter: '__input_keydown_enter__',
      InputChange: '__input_change__',
      InputBlur: '__input_blur__',
      InputFocus: '__input_focus__',
      MenuMouseLeave: '__menu_mouse_leave__',
      ItemMouseMove: '__item_mouse_move__',
      ItemClick: '__item_click__',
      ToggleButtonClick: '__togglebutton_click__',
      FunctionToggleMenu: '__function_toggle_menu__',
      FunctionOpenMenu: '__function_open_menu__',
      FunctionCloseMenu: '__function_close_menu__',
      FunctionSetHighlightedIndex: '__function_set_highlighted_index__',
      FunctionSelectItem: '__function_select_item__',
      FunctionSetInputValue: '__function_set_input_value__',
      FunctionReset: '__function_reset__',
      ControlledPropUpdatedSelectedItem: '__controlled_prop_updated_selected_item__'
    }
  },
  useMultipleSelection: [Function: useMultipleSelection] {
    stateChangeTypes: [Object: null prototype] {
      SelectedItemClick: '__selected_item_click__',
      SelectedItemKeyDownDelete: '__selected_item_keydown_delete__',
      SelectedItemKeyDownBackspace: '__selected_item_keydown_backspace__',
      SelectedItemKeyDownNavigationNext: '__selected_item_keydown_navigation_next__',
      SelectedItemKeyDownNavigationPrevious: '__selected_item_keydown_navigation_previous__',
      DropdownKeyDownNavigationPrevious: '__dropdown_keydown_navigation_previous__',
      DropdownKeyDownBackspace: '__dropdown_keydown_backspace__',
      DropdownClick: '__dropdown_click__',
      FunctionAddSelectedItem: '__function_add_selected_item__',
      FunctionRemoveSelectedItem: '__function_remove_selected_item__',
      FunctionSetSelectedItems: '__function_set_selected_items__',
      FunctionSetActiveIndex: '__function_set_active_index__',
      FunctionReset: '__function_reset__'
    }
  },
  useSelect: [Function: useSelect] {
    stateChangeTypes: [Object: null prototype] {
      ToggleButtonClick: '__togglebutton_click__',
      ToggleButtonKeyDownArrowDown: '__togglebutton_keydown_arrow_down__',
      ToggleButtonKeyDownArrowUp: '__togglebutton_keydown_arrow_up__',
      ToggleButtonKeyDownCharacter: '__togglebutton_keydown_character__',
      ToggleButtonKeyDownEscape: '__togglebutton_keydown_escape__',
      ToggleButtonKeyDownHome: '__togglebutton_keydown_home__',
      ToggleButtonKeyDownEnd: '__togglebutton_keydown_end__',
      ToggleButtonKeyDownEnter: '__togglebutton_keydown_enter__',
      ToggleButtonKeyDownSpaceButton: '__togglebutton_keydown_space_button__',
      ToggleButtonKeyDownPageUp: '__togglebutton_keydown_page_up__',
      ToggleButtonKeyDownPageDown: '__togglebutton_keydown_page_down__',
      ToggleButtonBlur: '__togglebutton_blur__',
      MenuMouseLeave: '__menu_mouse_leave__',
      ItemMouseMove: '__item_mouse_move__',
      ItemClick: '__item_click__',
      FunctionToggleMenu: '__function_toggle_menu__',
      FunctionOpenMenu: '__function_open_menu__',
      FunctionCloseMenu: '__function_close_menu__',
      FunctionSetHighlightedIndex: '__function_set_highlighted_index__',
      FunctionSelectItem: '__function_select_item__',
      FunctionSetInputValue: '__function_set_input_value__',
      FunctionReset: '__function_reset__'
    }
  }
}

Reproduction repository:

https://codesandbox.io/p/sandbox/recursing-kapitsa-l934w6

Problem description:

When trying to import downshift from a module, node is not using the esmodule version of the package.

This common issue is described here for packages that exports commonJs and esm: https://nodejs.org/docs/latest-v16.x/api/packages.html#writing-dual-packages-while-avoiding-or-minimizing-hazards

Suggested solution:

We should rename dist/downshift.esm.js to dist/downshift.mjs
We should have a "exports" key in the package.json:

  "exports": {
    ".": {
      "import": "./dist/downshift.mjs",
      "require": "./dist/downshift.cjs.js"
    }
  }

[mbektimirov]

Did anyone look into this? I fell into the same problem.