Hi i have been trying to intergrate hubspot to get email signups but i keep getting the error below. My node js is up to date.
My code is right here
“use client”
import React, { useState } from ‘react’;
import ‘./SignUp.css’
const hubspot = require(‘@hubspot/api-client’)
function SignUp() {
const [email, setEmail] = useState(‘’);
const handleEmailChange = (event) => {
setEmail(event.target.value);
};
const handleSubmit = async (event) => {
event.preventDefault();
const hubspotClient = new hubspot.Client({ accessToken: process.env.HUBSPOT_ACCESS_TOKEN });
// Create the contact with email
const contactProperties = {
email: email,
};
const contactData = {
properties: contactProperties,
};
try {
const apiResponse = await hubspotClient.crm.contacts.basicApi.create(contactData);
console.log(JSON.stringify(apiResponse, null, 2));
// Handle success
} catch (error) {
if (error.message === ‘HTTP request failed’) {
console.error(JSON.stringify(error.response, null, 2));
} else {
console.error(error);
}
// Handle error
}
};
return (
<section>
<div className=‘sign-up’>
<h2>Sign Up for Our Newsletter</h2>
<form onSubmit={handleSubmit}>
<input
type=“email”
id=“email”
name=“email”
value={email}
onChange={handleEmailChange}
required
/>
<button type=“submit”>Subscribe</button>
</form>
</div>
</section>
)
}
export default SignUp
app-index.js:31 TypeError: url_1.URL is not a constructor
at new RequestContext (webpack-internal:///(:3000/app-pages-browser)/./node_modules/@hubspot/api-client/lib/codegen/crm/contacts/http/http.js:54:20)
at ServerConfiguration.makeRequestContext (webpack-internal:///(:3000/app-pages-browser)/./node_modules/@hubspot/api-client/lib/codegen/crm/contacts/servers.js:25:16)
at BasicApiRequestFactory.eval (webpack-internal:///(:3000/app-pages-browser)/./node_modules/@hubspot/api-client/lib/codegen/crm/contacts/apis/BasicApi.js:50:55)
at Generator.next (<anonymous>)
at eval (webpack-internal:///(:3000/app-pages-browser)/./node_modules/@hubspot/api-client/lib/codegen/crm/contacts/apis/BasicApi.js:8:71)
at new Promise (<anonymous>)
at __awaiter (webpack-internal:///(:3000/app-pages-browser)/./node_modules/@hubspot/api-client/lib/codegen/crm/contacts/apis/BasicApi.js:4:12)
at BasicApiRequestFactory.create (webpack-internal:///(:3000/app-pages-browser)/./node_modules/@hubspot/api-client/lib/codegen/crm/contacts/apis/BasicApi.js:44:16)
at ObservableBasicApi.create (webpack-internal:///(:3000/app-pages-browser)/./node_modules/@hubspot/api-client/lib/codegen/crm/contacts/types/ObservableAPI.js:29:59)
at PromiseBasicApi.create (webpack-internal:///(:3000/app-pages-browser)/./node_modules/@hubspot/api-client/lib/codegen/crm/contacts/types/PromiseAPI.js:14:33)
at handleSubmit (webpack-internal:///(:3000/app-pages-browser)/./src/components/SignUp.js:31:75)
at HTMLUnknownElement.callCallback (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19443:14)
at Object.invokeGuardedCallbackImpl (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19492:16)
at invokeGuardedCallback (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19567:29)
at invokeGuardedCallbackAndCatchFirstError (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19581:25)
at executeDispatch (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30635:3)
at processDispatchQueueItemsInOrder (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30667:7)
at processDispatchQueue (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30680:5)
at dispatchEventsForPlugins (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30691:3)
at eval (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30881:12)
at batchedUpdates$1 (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:23761:12)
at batchedUpdates (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27597:12)
at dispatchEventForPluginEventSystem (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30880:3)
at dispatchEvent (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28653:5)
at dispatchDiscreteEvent (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28624:5)
Welcome to our community! Were you able to make any progress with this? I’ve not found a good example of a set-up like this, and I am uncertain if we can use the SDK in the browser like you are attempting to do.