Error exception in Menu @zendeskgarden/react-dropdowns.next (with React 17)

Question

Error exception in Menu @zendeskgarden/react-dropdowns.next (with React 17)

Closed this issue a year ago · 2 comments

Hi team

For some reason the new react-dropdowns.next does not run properly on browser, especially around the Menu component

Steps to replicate

This is the test code


 <Menu button="Choose succulent">
      <Item value="cactus">Cactus</Item>
      <Item value="jade">Jade plant</Item>
      <Item value="echeveria">Echeveria</Item>
  </Menu>

Outcome

The app can be built correctly, no errors at all. However when running on browsers, the app crashes with the following exception:

vendor__zendeskgarden.054423ab1f29ea0ef7d4.js:2132 Uncaught TypeError: getGroupProps is not a function
at vendor__zendeskgarden.054423ab1f29ea0ef7d4.js:2132:10
at vendor__zendeskgarden.054423ab1f29ea0ef7d4.js:11402:106
at renderWithHooks (react-dom.development.js:15015:20)
at updateForwardRef (react-dom.development.js:17074:22)
at beginWork (react-dom.development.js:19128:18)
at HTMLUnknownElement.callCallback (react-dom.development.js:3942:16)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3991:18)
at invokeGuardedCallback (react-dom.development.js:4053:33)
at beginWork$1 (react-dom.development.js:23994:9)
at performUnitOfWork (react-dom.development.js:22809:14)

Even though a quick grep found everything ready:

container-buttongroup/README.md:  const { selectedItem, focusedItem, getButtonProps, getGroupProps } = useButtonGroup({
container-buttongroup/README.md:    <div {...getGroupProps()}>
container-buttongroup/README.md:  {({ selectedItem, focusedItem, getButtonProps, getGroupProps }) => (
container-buttongroup/README.md:    <div {...getGroupProps()}>
container-buttongroup/dist/typings/types.d.ts:    getGroupProps: <T extends Element>(props?: Omit<HTMLProps<T>, 'role'> & {
container-buttongroup/dist/typings/types.d.ts:     * @param {function} [options.getGroupProps] Group props getter
container-buttongroup/dist/typings/types.d.ts:        getGroupProps: IUseButtonGroupReturnValue<Item>['getGroupProps'];
container-buttongroup/dist/index.cjs.js:  const getGroupProps = function (_temp) {
container-buttongroup/dist/index.cjs.js:    getGroupProps,
container-buttongroup/dist/index.esm.js:  const getGroupProps = function (_temp) {
container-buttongroup/dist/index.esm.js:    getGroupProps,
container-menu/dist/index.cjs.js:    getGroupProps,
container-menu/dist/index.cjs.js:      ...getGroupProps({
container-menu/dist/index.cjs.js:  }, [triggerId, menuRef, getGroupProps, handleMenuMouseLeave]);
container-menu/dist/index.esm.js:    getGroupProps,
container-menu/dist/index.esm.js:      ...getGroupProps({
container-menu/dist/index.esm.js:  }, [triggerId, menuRef, getGroupProps, handleMenuMouseLeave]);
container-menu/node_modules/@zendeskgarden/container-selection/README.md:  const { focusedValue, selectedValue, getGroupProps, getElementProps } = useSelection({
container-menu/node_modules/@zendeskgarden/container-selection/README.md:    <ul {...getGroupProps()}>
container-menu/node_modules/@zendeskgarden/container-selection/README.md:  {({ selectedValue, focusedValue, getGroupProps, getElementProps }) => (
container-menu/node_modules/@zendeskgarden/container-selection/README.md:    <ul {...getGroupProps()}>
container-menu/node_modules/@zendeskgarden/container-selection/dist/typings/types.d.ts:    getGroupProps: <T extends Element>(props?: Omit<HTMLProps<T>, 'role'> & {
container-menu/node_modules/@zendeskgarden/container-selection/dist/typings/types.d.ts:     * @param {function} [options.getGroupProps] Container props getter
container-menu/node_modules/@zendeskgarden/container-selection/dist/typings/types.d.ts:        getGroupProps: IUseSelectionReturnValue<Value>['getGroupProps'];
container-menu/node_modules/@zendeskgarden/container-selection/dist/index.cjs.js:  const getGroupProps = React.useCallback(function (_temp) {
container-menu/node_modules/@zendeskgarden/container-selection/dist/index.cjs.js:    getGroupProps
container-menu/node_modules/@zendeskgarden/container-selection/dist/index.esm.js:  const getGroupProps = useCallback(function (_temp) {
container-menu/node_modules/@zendeskgarden/container-selection/dist/index.esm.js:    getGroupProps
react-buttons/dist/index.cjs.js:    getGroupProps
react-buttons/dist/index.cjs.js:  }, getGroupProps(otherProps)), children));
react-buttons/dist/index.esm.js:    getGroupProps
react-buttons/dist/index.esm.js:  }, getGroupProps(otherProps)), children));
react-buttons/node_modules/@zendeskgarden/container-selection/README.md:  const { focusedValue, selectedValue, getGroupProps, getElementProps } = useSelection({
react-buttons/node_modules/@zendeskgarden/container-selection/README.md:    <ul {...getGroupProps()}>
react-buttons/node_modules/@zendeskgarden/container-selection/README.md:  {({ selectedValue, focusedValue, getGroupProps, getElementProps }) => (
react-buttons/node_modules/@zendeskgarden/container-selection/README.md:    <ul {...getGroupProps()}>
react-buttons/node_modules/@zendeskgarden/container-selection/dist/typings/types.d.ts:    getGroupProps: <T extends Element>(props?: Omit<HTMLProps<T>, 'role'> & {
react-buttons/node_modules/@zendeskgarden/container-selection/dist/typings/types.d.ts:     * @param {function} [options.getGroupProps] Container props getter
react-buttons/node_modules/@zendeskgarden/container-selection/dist/typings/types.d.ts:        getGroupProps: IUseSelectionReturnValue<Value>['getGroupProps'];
react-buttons/node_modules/@zendeskgarden/container-selection/dist/index.cjs.js:  const getGroupProps = React.useCallback(function (_temp) {
react-buttons/node_modules/@zendeskgarden/container-selection/dist/index.cjs.js:    getGroupProps
react-buttons/node_modules/@zendeskgarden/container-selection/dist/index.esm.js:  const getGroupProps = useCallback(function (_temp) {
react-buttons/node_modules/@zendeskgarden/container-selection/dist/index.esm.js:    getGroupProps

Workarounds tries

Attempted to manually implement/fix this issue rather than relying on node packages, by manually install 2 dep packages container-buttongroup and container-menu but no hope
Double check and making sure the ThemeProvider of ZD Garden is same version as this Menu package relied on
Tried to upgrade React17 to Reach18 but Zendesk Garden does not support it properly

Fine Print

Component: @zendeskgarden/react-dropdowns.next
Version: 8.73.1
Browsers: all

Thank you for reading

Answer 1 · 2023-10-30T16:45:29.000Z

Hi @ryannLL. Can you isolate the issue in a codesandbox? Using the "Open in CodeSandbox" links from https://garden.zendesk.com/components/menu work as expected with v8.73.1.

Answer 2 · 2023-10-31T00:01:11.000Z

hi @jzempel

v8.73.1

Per your suggestion, I've tried the CodeSandbox for isolation and narrowed down to that it is incompatible with Webpack and Babel loader (including their latest versions).

If we run it as standalone, which doesn't involve Webpack and Babel Loader, then everything runs fine.

So I assume this issue can be closed, since it's to do with compatibility between ZDGarden and other packages (Webpack, Babel), instead of the ZDGarden itself.

We couldn't find solution and hence back to use the old Deprecated version, because we need Webpack/Babel for our project.

Hopefully either ZDGarden or Webpack/Babel be compatible in the future

Cheers.