Error: Invalid hook call when importing a Zendesk Garden React component

[Luis_Brito]

The code works fine without using Airtable SDK. Any ideas on what can be causing this?
You can see it working here: vibrant-snow-m8sl6 - CodeSandbox

Here’s my code using Airtable’s initializeBlock() :

import React, { useState } from 'react';
import { initializeBlock } from '@airtable/blocks/ui';

import {
    Dropdown,
    Field,
    Menu,
    Item,
    Select,
    Label,
} from '@zendeskgarden/react-dropdowns';

interface IItem {
    label: string;
    value: string;
}

const items = [
    { label: 'Fern', value: 'item-1' },
    { label: 'Snake plant', value: 'item-2' },
    { label: 'Rubber tree', value: 'item-3' },
];

const App = () => {
    const [selectedItem, setSelectedItem] = useState(items[0]);

    return (
        <Dropdown
            selectedItem={selectedItem}
            onSelect={setSelectedItem}
            downshiftProps={{
                itemToString: (item: IItem) => item && item.label,
            }}
        >
            <Field>
                <Label>Houseplant</Label>
                <Select>{selectedItem.label}</Select>
            </Field>
            <Menu>
                {items.map((option) => (
                    <Item key={option.value} value={option}>
                        {option.label}
                    </Item>
                ))}
            </Menu>
        </Dropdown>
    );
};

initializeBlock(() => <App />);

Error:

[Billy_Littlefie]

Luis_Brito:

The code works fine without using Airtable SDK. Any ideas on what can be causing this?

Hi @Luis_Brito ,

Sorry you’re running into trouble here. Unfortunately, I wasn’t able to reproduce this error locally. In my attempt to reproduce, I started from scratch, copied your code in, then installed @zendeskgarden/react-dropdowns and it’s required dependencies: styled-components & @zendeskgarden/react-theming.

If you’re still running into this issue, could you share the error that’s occurring (it should be the line above what you screenshotted in your message). It also might be helpful to see your package.json for debugging purposes.

Cheers,
Billy

[Luis_Brito]

Hi Billy,

Thanks for getting back to me.
It’s not something related to Airtable SDK. I somehow solved it by deleting my node_modules folder and running yarn install again :man_shrugging:

[Billy_Littlefie]

Ahhh, classic stale dependencies. Glad you solved the issue!