Hello,
I’ve followed the UI Extensions quickstart guide and created an Example card in our environment. The card is showing up properly and changes made to both the card and the project sync properly (Title, description of project etc), however the information thats supposed to be visible inside the card isnt. I’ve tried adding new elements to the Example.jsx file but no luck. Any thoughts?
import React, { useState } from "react";
import {
Divider,
Link,
Button,
Text,
Input,
Flex,
hubspot,
} from "@hubspot/ui-extensions";
// Define the extension to be run within the Hubspot CRM
hubspot.extend(({ context, runServerlessFunction, actions }) => (
<Extension
context={context}
runServerless={runServerlessFunction}
sendAlert={actions.addAlert}
/>
));
// Define the Extension component, taking in runServerless, context, & sendAlert as props
const Extension = ({ context, runServerless, sendAlert }) => {
const [text, setText] = useState("");
// Call serverless function to execute with parameters.
// The `myFunc` function name is configured inside `serverless.json`
const handleClick = async () => {
const { response } = await runServerless({ name: "myFunc", parameters: { text: text } });
sendAlert({ message: response });
};
return (
<>
<Text>Hello World!</Text>
<Text>
<Text format={{ fontWeight: "bold" }}>
Your first UI extension is ready!
</Text>
Congratulations, {context.user.firstName}! You just deployed your first
HubSpot UI extension. This example demonstrates how you would send
parameters from your React frontend to the serverless function and get a
response back.
</Text>
<Flex direction="row" align="end" gap="small">
<Input name="text" label="Send" onInput={(t) => setText(t)} />
<Button type="submit" onClick={handleClick}>
Click me
</Button>
</Flex>
</>
);
};
Tried one of the other sample projects and same issue:
Could it have something to do with the CLI? Ran npm install -g @hubspot/cli@latest again and this is what i got:
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated domexception@2.0.1: Use your platform's native DOMException instead
npm WARN deprecated w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin.
npm WARN deprecated sane@4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
changed 1130 packages in 55s
86 packages are looking for funding
run `npm fund` for details
Tried going through the set-up on my private computer which kickstarted the connection. Possibly something with our organizational settings on devices which restricted the sync somehow.
Hi @KLindfors
This is very interesting. Are you still facing this issue?
