Describe the bug
While rendering the DuffelAncillaries component in nextjs. We are getting invalid hook call in the browser console and doesn't work anything.
Version of @duffel/components
^3.7.17
Please add:
duffle lib - ^3.7.17
Using yarn
Framework - Nextjs
Code sample to reproduce
`import { DuffelAncillaries } from "@duffel/components";
const Ancillaries = () => {
return (
<DuffelAncillaries
debug={true}
offer_id="fixture_off_1"
services={["bags", "seats", "cancel_for_any_reason"]}
passengers={[
{
id: "pas_0000AUde3KY1SptM6ABSfU",
given_name: "Mae",
family_name: "Jemison",
gender: "f",
title: "dr",
born_on: "1956-10-17",
email: "m.jemison@nasa.gov",
phone_number: "+16177562626",
},
{
id: "pas_0000AUde3KY1SptM6ABSfT",
given_name: "Dorothy",
family_name: "Green",
gender: "f",
title: "dr",
born_on: "1942-10-17",
email: "",
phone_number: "",
},
]}
onPayloadReady={console.log}
/>
);
};
`
Also added a condition to render the component once window object is present to ensure localStorage is available, which is required by duffle component to load.
Expected behavior
It should render component as we have in react js
Screenshots
Logs:
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at Z9 (webpack-internal:///./node_modules/@duffel/components/index.js:37:116163)
at Ancillaries
at Payment (webpack-internal:///./src/pages/payment.tsx:15:84)
at div
at Provider (webpack-internal:///./node_modules/react-redux/dist/react-redux.mjs:1053:3)
at App (webpack-internal:///./src/pages/_app.tsx:19:11)
Additional context
Seems issue is with Z9 component as per logs, that is inside DuffelAncillaries
Describe the bug While rendering the
DuffelAncillariescomponent in nextjs. We are getting invalid hook call in the browser console and doesn't work anything.Version of @duffel/components ^3.7.17
Please add:
Code sample to reproduce `import { DuffelAncillaries } from "@duffel/components";
const Ancillaries = () => { return ( <DuffelAncillaries debug={true} offer_id="fixture_off_1" services={["bags", "seats", "cancel_for_any_reason"]} passengers={[ { id: "pas_0000AUde3KY1SptM6ABSfU", given_name: "Mae", family_name: "Jemison", gender: "f", title: "dr", born_on: "1956-10-17", email: "m.jemison@nasa.gov", phone_number: "+16177562626", }, { id: "pas_0000AUde3KY1SptM6ABSfT", given_name: "Dorothy", family_name: "Green", gender: "f", title: "dr", born_on: "1942-10-17", email: "", phone_number: "", }, ]} onPayloadReady={console.log} /> ); }; ` Also added a condition to render the component once window object is present to ensure localStorage is available, which is required by duffle component to load.
Expected behavior It should render component as we have in react js
Screenshots
Logs:
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. at Z9 (webpack-internal:///./node_modules/@duffel/components/index.js:37:116163) at Ancillaries at Payment (webpack-internal:///./src/pages/payment.tsx:15:84) at div at Provider (webpack-internal:///./node_modules/react-redux/dist/react-redux.mjs:1053:3) at App (webpack-internal:///./src/pages/_app.tsx:19:11)
Additional context Seems issue is with Z9 component as per logs, that is inside DuffelAncillaries