downshift
downshift copied to clipboard
import Downshift from 'downshift' returns a commonJs module
-
downshift
version: ^7.6.0 -
node
version: v18.16.0 -
npm
(oryarn
) 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"
}
}
Did anyone look into this? I fell into the same problem.