Help

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

Topic Labels: Custom Extensions
2369 3
cancel
Showing results for 
Search instead for 
Did you mean: 
Luis_Brito
5 - Automation Enthusiast
5 - Automation Enthusiast

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:
image

3 Replies 3
Billy_Littlefie
7 - App Architect
7 - App Architect

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

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:

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