[{"id":"36162251089","type":"IssueCommentEvent","actor":{"id":12544704,"login":"Tomekmularczyk","display_login":"Tomekmularczyk","gravatar_id":"","url":"https://api.github.com/users/Tomekmularczyk","avatar_url":"https://avatars.githubusercontent.com/u/12544704?"},"repo":{"id":21088356,"name":"Hacker0x01/react-datepicker","url":"https://api.github.com/repos/Hacker0x01/react-datepicker"},"payload":{"action":"created","issue":{"url":"https://api.github.com/repos/Hacker0x01/react-datepicker/issues/4504","repository_url":"https://api.github.com/repos/Hacker0x01/react-datepicker","labels_url":"https://api.github.com/repos/Hacker0x01/react-datepicker/issues/4504/labels{/name}","comments_url":"https://api.github.com/repos/Hacker0x01/react-datepicker/issues/4504/comments","events_url":"https://api.github.com/repos/Hacker0x01/react-datepicker/issues/4504/events","html_url":"https://github.com/Hacker0x01/react-datepicker/issues/4504","id":2116996556,"node_id":"I_kwDOAUHIZM5-Ls3M","number":4504,"title":"`TypeError: fn is not a function` thrown with v5.x and 6.x","user":{"login":"acelaya","id":2719332,"node_id":"MDQ6VXNlcjI3MTkzMzI=","avatar_url":"https://avatars.githubusercontent.com/u/2719332?v=4","gravatar_id":"","url":"https://api.github.com/users/acelaya","html_url":"https://github.com/acelaya","followers_url":"https://api.github.com/users/acelaya/followers","following_url":"https://api.github.com/users/acelaya/following{/other_user}","gists_url":"https://api.github.com/users/acelaya/gists{/gist_id}","starred_url":"https://api.github.com/users/acelaya/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/acelaya/subscriptions","organizations_url":"https://api.github.com/users/acelaya/orgs","repos_url":"https://api.github.com/users/acelaya/repos","events_url":"https://api.github.com/users/acelaya/events{/privacy}","received_events_url":"https://api.github.com/users/acelaya/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2024-02-04T09:55:12Z","updated_at":"2024-03-01T13:17:19Z","closed_at":null,"author_association":"NONE","active_lock_reason":null,"body":"**Describe the bug**\r\n\r\nI just updated from v4.x to v6.x (I also tried v5.x before), and noticed the calendar was not being properly positioned, and it didn't take into consideration the available space above and below.\r\n\r\nThen I saw these errors all over the console:\r\n\r\n![image](https://github.com/Hacker0x01/react-datepicker/assets/2719332/2d16d664-13bd-452c-863a-de2b6862ca47)\r\n\r\n```\r\nUncaught (in promise) TypeError: fn is not a function\r\n at computePosition (react-datepicker.js?v=fc9deb51:678:15)\r\n```\r\n\r\n![image](https://github.com/Hacker0x01/react-datepicker/assets/2719332/155d8cfb-7a18-4035-a606-c6981f6745c0)\r\n\r\nI might be wrong, but this seems to be part of `@floating-ui/react` code, but bundled together with react-datepicker? I'm wondering if perhaps the dependencies should not be bundled, as downstream projects will be installing them anyway.\r\n\r\nThis is probably unrelated with the issue, though.\r\n\r\n**To Reproduce**\r\n\r\nI'm trying to put together a minimum project reproducing this, to determine if there's any kind of conflict with other deps.\r\n\r\nIn the meantime, you can also see the error triggered in my project's tests, here https://github.com/shlinkio/shlink-web-component/actions/runs/7766045038/job/21181419223?pr=248 (this is dependabot's PR to update to v6.x)\r\n\r\n**Expected behavior**\r\n\r\nCalendar popover gets properly positioned.\r\n\r\n**Screenshots**\r\n\r\nYou can see the wrong positioning here (ignore the triangle. I'm almost sure that's a conflict with other CSS in the page and I will sort that out myself)\r\n\r\n[GrabaciĆ³n de pantalla desde 2024-02-04 10-50-29.webm](https://github.com/Hacker0x01/react-datepicker/assets/2719332/11663c0b-349d-420a-a99c-5419c89b76f9)\r\n\r\nNotice it renders over the input, instead of below/above it.\r\n\r\n**Desktop (please complete the following information):**\r\n\r\n- OS: Ubuntu\r\n- Browser: Google Chrome\r\n- Version: 120\r\n","reactions":{"url":"https://api.github.com/repos/Hacker0x01/react-datepicker/issues/4504/reactions","total_count":3,"+1":3,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0},"timeline_url":"https://api.github.com/repos/Hacker0x01/react-datepicker/issues/4504/timeline","performed_via_github_app":null,"state_reason":null},"comment":{"url":"https://api.github.com/repos/Hacker0x01/react-datepicker/issues/comments/1973182526","html_url":"https://github.com/Hacker0x01/react-datepicker/issues/4504#issuecomment-1973182526","issue_url":"https://api.github.com/repos/Hacker0x01/react-datepicker/issues/4504","id":1973182526,"node_id":"IC_kwDOAUHIZM51nGA-","user":{"login":"Tomekmularczyk","id":12544704,"node_id":"MDQ6VXNlcjEyNTQ0NzA0","avatar_url":"https://avatars.githubusercontent.com/u/12544704?v=4","gravatar_id":"","url":"https://api.github.com/users/Tomekmularczyk","html_url":"https://github.com/Tomekmularczyk","followers_url":"https://api.github.com/users/Tomekmularczyk/followers","following_url":"https://api.github.com/users/Tomekmularczyk/following{/other_user}","gists_url":"https://api.github.com/users/Tomekmularczyk/gists{/gist_id}","starred_url":"https://api.github.com/users/Tomekmularczyk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Tomekmularczyk/subscriptions","organizations_url":"https://api.github.com/users/Tomekmularczyk/orgs","repos_url":"https://api.github.com/users/Tomekmularczyk/repos","events_url":"https://api.github.com/users/Tomekmularczyk/events{/privacy}","received_events_url":"https://api.github.com/users/Tomekmularczyk/received_events","type":"User","site_admin":false},"created_at":"2024-03-01T13:17:18Z","updated_at":"2024-03-01T13:17:18Z","author_association":"NONE","body":"In my case it helped to change \r\n\r\n```\r\npopperModifiers={[\r\n {\r\n name: \"offset\",\r\n options: {\r\n offset: [0, -6],\r\n },\r\n },\r\n]}\r\n```\r\n\r\nto\r\n\r\n```\r\nimport { autoPlacement, offset } from \"@floating-ui/dom\";\r\n\r\npopperModifiers={[\r\n autoPlacement({\r\n alignment: \"start\",\r\n autoAlignment: false,\r\n }),\r\n offset({ mainAxis: -6, crossAxis: 0 }),\r\n]}\r\n```\r\n\r\nit's basically the `popperModifiers` prop that has to be updated after upgrading.","reactions":{"url":"https://api.github.com/repos/Hacker0x01/react-datepicker/issues/comments/1973182526/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0},"performed_via_github_app":null}},"public":true,"created_at":"2024-03-01T13:17:19Z","org":{"id":3014877,"login":"Hacker0x01","gravatar_id":"","url":"https://api.github.com/orgs/Hacker0x01","avatar_url":"https://avatars.githubusercontent.com/u/3014877?"}},{"id":"35412200149","type":"IssueCommentEvent","actor":{"id":12544704,"login":"Tomekmularczyk","display_login":"Tomekmularczyk","gravatar_id":"","url":"https://api.github.com/users/Tomekmularczyk","avatar_url":"https://avatars.githubusercontent.com/u/12544704?"},"repo":{"id":21088356,"name":"Hacker0x01/react-datepicker","url":"https://api.github.com/repos/Hacker0x01/react-datepicker"},"payload":{"action":"created","issue":{"url":"https://api.github.com/repos/Hacker0x01/react-datepicker/issues/4504","repository_url":"https://api.github.com/repos/Hacker0x01/react-datepicker","labels_url":"https://api.github.com/repos/Hacker0x01/react-datepicker/issues/4504/labels{/name}","comments_url":"https://api.github.com/repos/Hacker0x01/react-datepicker/issues/4504/comments","events_url":"https://api.github.com/repos/Hacker0x01/react-datepicker/issues/4504/events","html_url":"https://github.com/Hacker0x01/react-datepicker/issues/4504","id":2116996556,"node_id":"I_kwDOAUHIZM5-Ls3M","number":4504,"title":"`TypeError: fn is not a function` thrown with v5.x and 6.x","user":{"login":"acelaya","id":2719332,"node_id":"MDQ6VXNlcjI3MTkzMzI=","avatar_url":"https://avatars.githubusercontent.com/u/2719332?v=4","gravatar_id":"","url":"https://api.github.com/users/acelaya","html_url":"https://github.com/acelaya","followers_url":"https://api.github.com/users/acelaya/followers","following_url":"https://api.github.com/users/acelaya/following{/other_user}","gists_url":"https://api.github.com/users/acelaya/gists{/gist_id}","starred_url":"https://api.github.com/users/acelaya/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/acelaya/subscriptions","organizations_url":"https://api.github.com/users/acelaya/orgs","repos_url":"https://api.github.com/users/acelaya/repos","events_url":"https://api.github.com/users/acelaya/events{/privacy}","received_events_url":"https://api.github.com/users/acelaya/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2024-02-04T09:55:12Z","updated_at":"2024-02-05T15:17:26Z","closed_at":null,"author_association":"NONE","active_lock_reason":null,"body":"**Describe the bug**\r\n\r\nI just updated from v4.x to v6.x (I also tried v5.x before), and noticed the calendar was not being properly positioned, and it didn't take into consideration the available space above and below.\r\n\r\nThen I saw these errors all over the console:\r\n\r\n![image](https://github.com/Hacker0x01/react-datepicker/assets/2719332/2d16d664-13bd-452c-863a-de2b6862ca47)\r\n\r\n```\r\nUncaught (in promise) TypeError: fn is not a function\r\n at computePosition (react-datepicker.js?v=fc9deb51:678:15)\r\n```\r\n\r\n![image](https://github.com/Hacker0x01/react-datepicker/assets/2719332/155d8cfb-7a18-4035-a606-c6981f6745c0)\r\n\r\nI might be wrong, but this seems to be part of `@floating-ui/react` code, but bundled together with react-datepicker? I'm wondering if perhaps the dependencies should not be bundled, as downstream projects will be installing them anyway.\r\n\r\nThis is probably unrelated with the issue, though.\r\n\r\n**To Reproduce**\r\n\r\nI'm trying to put together a minimum project reproducing this, to determine if there's any kind of conflict with other deps.\r\n\r\nIn the meantime, you can also see the error triggered in my project's tests, here https://github.com/shlinkio/shlink-web-component/actions/runs/7766045038/job/21181419223?pr=248 (this is dependabot's PR to update to v6.x)\r\n\r\n**Expected behavior**\r\n\r\nCalendar popover gets properly positioned.\r\n\r\n**Screenshots**\r\n\r\nYou can see the wrong positioning here (ignore the triangle. I'm almost sure that's a conflict with other CSS in the page and I will sort that out myself)\r\n\r\n[GrabaciĆ³n de pantalla desde 2024-02-04 10-50-29.webm](https://github.com/Hacker0x01/react-datepicker/assets/2719332/11663c0b-349d-420a-a99c-5419c89b76f9)\r\n\r\nNotice it renders over the input, instead of below/above it.\r\n\r\n**Desktop (please complete the following information):**\r\n\r\n- OS: Ubuntu\r\n- Browser: Google Chrome\r\n- Version: 120\r\n","reactions":{"url":"https://api.github.com/repos/Hacker0x01/react-datepicker/issues/4504/reactions","total_count":1,"+1":1,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0},"timeline_url":"https://api.github.com/repos/Hacker0x01/react-datepicker/issues/4504/timeline","performed_via_github_app":null,"state_reason":null},"comment":{"url":"https://api.github.com/repos/Hacker0x01/react-datepicker/issues/comments/1927235424","html_url":"https://github.com/Hacker0x01/react-datepicker/issues/4504#issuecomment-1927235424","issue_url":"https://api.github.com/repos/Hacker0x01/react-datepicker/issues/4504","id":1927235424,"node_id":"IC_kwDOAUHIZM5y30dg","user":{"login":"Tomekmularczyk","id":12544704,"node_id":"MDQ6VXNlcjEyNTQ0NzA0","avatar_url":"https://avatars.githubusercontent.com/u/12544704?v=4","gravatar_id":"","url":"https://api.github.com/users/Tomekmularczyk","html_url":"https://github.com/Tomekmularczyk","followers_url":"https://api.github.com/users/Tomekmularczyk/followers","following_url":"https://api.github.com/users/Tomekmularczyk/following{/other_user}","gists_url":"https://api.github.com/users/Tomekmularczyk/gists{/gist_id}","starred_url":"https://api.github.com/users/Tomekmularczyk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Tomekmularczyk/subscriptions","organizations_url":"https://api.github.com/users/Tomekmularczyk/orgs","repos_url":"https://api.github.com/users/Tomekmularczyk/repos","events_url":"https://api.github.com/users/Tomekmularczyk/events{/privacy}","received_events_url":"https://api.github.com/users/Tomekmularczyk/received_events","type":"User","site_admin":false},"created_at":"2024-02-05T15:17:25Z","updated_at":"2024-02-05T15:17:25Z","author_association":"NONE","body":"Same in NEXTjs 14.0.1\r\n\r\n```tsx\r\nUncaught (in promise) TypeError: fn is not a function\r\n at computePosition (floating-ui.core.mjs:114:15)\r\ncomputePosition @ floating-ui.core.mjs:114\r\nPromise.then (async)\r\neval @ floating-ui.react-dom.mjs:210\r\nautoUpdate @ floating-ui.dom.mjs:622\r\neval @ floating-ui.react-dom.mjs:246\r\ncommitHookEffectListMount @ react-dom.development.js:20904\r\ncommitHookLayoutEffects @ react-dom.development.js:21014\r\ncommitLayoutEffectOnFiber @ react-dom.development.js:21212\r\n```","reactions":{"url":"https://api.github.com/repos/Hacker0x01/react-datepicker/issues/comments/1927235424/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0},"performed_via_github_app":null}},"public":true,"created_at":"2024-02-05T15:17:26Z","org":{"id":3014877,"login":"Hacker0x01","gravatar_id":"","url":"https://api.github.com/orgs/Hacker0x01","avatar_url":"https://avatars.githubusercontent.com/u/3014877?"}},{"id":"35015158610","type":"IssueCommentEvent","actor":{"id":12544704,"login":"Tomekmularczyk","display_login":"Tomekmularczyk","gravatar_id":"","url":"https://api.github.com/users/Tomekmularczyk","avatar_url":"https://avatars.githubusercontent.com/u/12544704?"},"repo":{"id":105590837,"name":"aws-amplify/amplify-js","url":"https://api.github.com/repos/aws-amplify/amplify-js"},"payload":{"action":"created","issue":{"url":"https://api.github.com/repos/aws-amplify/amplify-js/issues/12867","repository_url":"https://api.github.com/repos/aws-amplify/amplify-js","labels_url":"https://api.github.com/repos/aws-amplify/amplify-js/issues/12867/labels{/name}","comments_url":"https://api.github.com/repos/aws-amplify/amplify-js/issues/12867/comments","events_url":"https://api.github.com/repos/aws-amplify/amplify-js/issues/12867/events","html_url":"https://github.com/aws-amplify/amplify-js/issues/12867","id":2092269504,"node_id":"I_kwDOBkswNc58tX_A","number":12867,"title":"Error: \"No Credentials\" on GraphQL Request Via Amplify in NextJs 14 (with App Router) SSR for Stripe Webhook","user":{"login":"CooperCodeComposer","id":16313589,"node_id":"MDQ6VXNlcjE2MzEzNTg5","avatar_url":"https://avatars.githubusercontent.com/u/16313589?v=4","gravatar_id":"","url":"https://api.github.com/users/CooperCodeComposer","html_url":"https://github.com/CooperCodeComposer","followers_url":"https://api.github.com/users/CooperCodeComposer/followers","following_url":"https://api.github.com/users/CooperCodeComposer/following{/other_user}","gists_url":"https://api.github.com/users/CooperCodeComposer/gists{/gist_id}","starred_url":"https://api.github.com/users/CooperCodeComposer/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/CooperCodeComposer/subscriptions","organizations_url":"https://api.github.com/users/CooperCodeComposer/orgs","repos_url":"https://api.github.com/users/CooperCodeComposer/repos","events_url":"https://api.github.com/users/CooperCodeComposer/events{/privacy}","received_events_url":"https://api.github.com/users/CooperCodeComposer/received_events","type":"User","site_admin":false},"labels":[{"id":908644642,"node_id":"MDU6TGFiZWw5MDg2NDQ2NDI=","url":"https://api.github.com/repos/aws-amplify/amplify-js/labels/GraphQL","name":"GraphQL","color":"e535ab","default":false,"description":"Related to GraphQL API issues"},{"id":3188233958,"node_id":"MDU6TGFiZWwzMTg4MjMzOTU4","url":"https://api.github.com/repos/aws-amplify/amplify-js/labels/pending-triage","name":"pending-triage","color":"fef2c0","default":false,"description":"Issue is pending triage"}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2024-01-20T23:04:48Z","updated_at":"2024-01-22T13:18:53Z","closed_at":null,"author_association":"NONE","active_lock_reason":null,"body":"### Before opening, please confirm:\n\n\n- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-js/issues?q=is%3Aissue+) and [discussions](https://github.com/aws-amplify/amplify-js/discussions).\n- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-js/blob/main/CONTRIBUTING.md#bug-reports).\n- [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.\n\n### JavaScript Framework\n\nNext.js\n\n### Amplify APIs\n\nAuthentication, GraphQL API\n\n### Amplify Version\n\nv6\n\n### Amplify Categories\n\napi\n\n### Backend\n\nAmplify CLI\n\n### Environment information\n\n\r\n\r\n```\r\n# Put output below this line\r\n\r\n System:\r\n OS: macOS 13.6\r\n CPU: (10) arm64 Apple M1 Pro\r\n Memory: 839.03 MB / 32.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node\r\n Yarn: 1.22.18 - ~/.nvm/versions/node/v16.14.2/bin/yarn\r\n npm: 9.6.7 - ~/.nvm/versions/node/v16.14.2/bin/npm\r\n Browsers:\r\n Chrome: 120.0.6099.234\r\n Safari: 17.0\r\n npmPackages:\r\n @ampproject/toolbox-optimizer: undefined ()\r\n @apollo/client: ^3.8.8 => 3.8.8 \r\n @apollo/client/cache: undefined ()\r\n @apollo/client/core: undefined ()\r\n @apollo/client/dev: undefined ()\r\n @apollo/client/errors: undefined ()\r\n @apollo/client/link/batch: undefined ()\r\n @apollo/client/link/batch-http: undefined ()\r\n @apollo/client/link/context: undefined ()\r\n @apollo/client/link/core: undefined ()\r\n @apollo/client/link/error: undefined ()\r\n @apollo/client/link/http: undefined ()\r\n @apollo/client/link/persisted-queries: undefined ()\r\n @apollo/client/link/remove-typename: undefined ()\r\n @apollo/client/link/retry: undefined ()\r\n @apollo/client/link/schema: undefined ()\r\n @apollo/client/link/subscriptions: undefined ()\r\n @apollo/client/link/utils: undefined ()\r\n @apollo/client/link/ws: undefined ()\r\n @apollo/client/react: undefined ()\r\n @apollo/client/react/components: undefined ()\r\n @apollo/client/react/context: undefined ()\r\n @apollo/client/react/hoc: undefined ()\r\n @apollo/client/react/hooks: undefined ()\r\n @apollo/client/react/parser: undefined ()\r\n @apollo/client/react/ssr: undefined ()\r\n @apollo/client/testing: undefined ()\r\n @apollo/client/testing/core: undefined ()\r\n @apollo/client/utilities: undefined ()\r\n @apollo/client/utilities/globals: undefined ()\r\n @aws-amplify/adapter-nextjs: ^1.0.10 => 1.0.10 \r\n @aws-amplify/adapter-nextjs/api: undefined ()\r\n @aws-amplify/adapter-nextjs/data: undefined ()\r\n @babel/core: undefined ()\r\n @babel/runtime: 7.22.5 \r\n @chakra-ui/icons: ^2.1.1 => 2.1.1 \r\n @chakra-ui/react: ^2.8.2 => 2.8.2 \r\n @edge-runtime/cookies: 4.0.2 \r\n @edge-runtime/ponyfill: 2.4.1 \r\n @edge-runtime/primitives: 4.0.2 \r\n @emotion/react: ^11.11.3 => 11.11.3 \r\n @emotion/styled: ^11.11.0 => 11.11.0 \r\n @hapi/accept: undefined ()\r\n @mswjs/interceptors: undefined ()\r\n @napi-rs/triples: undefined ()\r\n @next/font: undefined ()\r\n @next/react-dev-overlay: undefined ()\r\n @opentelemetry/api: undefined ()\r\n @segment/ajv-human-errors: undefined ()\r\n @stripe/react-stripe-js: ^2.4.0 => 2.4.0 \r\n @stripe/stripe-js: ^2.3.0 => 2.3.0 \r\n @types/node: ^20 => 20.10.6 \r\n @types/react: ^18 => 18.2.46 \r\n @types/react-dom: ^18 => 18.2.18 \r\n @vercel/nft: undefined ()\r\n @vercel/og: 0.5.15 \r\n acorn: undefined ()\r\n amphtml-validator: undefined ()\r\n anser: undefined ()\r\n apollo-link: ^1.2.14 => 1.2.14 (1.2.5)\r\n apollo-link-http: ^1.5.17 => 1.5.17 (1.5.8)\r\n arg: undefined ()\r\n assert: undefined ()\r\n async-retry: undefined ()\r\n async-sema: undefined ()\r\n aws-amplify: ^6.0.10 => 6.0.10 \r\n aws-amplify/adapter-core: undefined ()\r\n aws-amplify/analytics: undefined ()\r\n aws-amplify/analytics/kinesis: undefined ()\r\n aws-amplify/analytics/kinesis-firehose: undefined ()\r\n aws-amplify/analytics/personalize: undefined ()\r\n aws-amplify/analytics/pinpoint: undefined ()\r\n aws-amplify/api: undefined ()\r\n aws-amplify/api/server: undefined ()\r\n aws-amplify/auth: undefined ()\r\n aws-amplify/auth/cognito: undefined ()\r\n aws-amplify/auth/cognito/server: undefined ()\r\n aws-amplify/auth/enable-oauth-listener: undefined ()\r\n aws-amplify/auth/server: undefined ()\r\n aws-amplify/datastore: undefined ()\r\n aws-amplify/in-app-messaging: undefined ()\r\n aws-amplify/in-app-messaging/pinpoint: undefined ()\r\n aws-amplify/push-notifications: undefined ()\r\n aws-amplify/push-notifications/pinpoint: undefined ()\r\n aws-amplify/storage: undefined ()\r\n aws-amplify/storage/s3: undefined ()\r\n aws-amplify/storage/s3/server: undefined ()\r\n aws-amplify/storage/server: undefined ()\r\n aws-amplify/utils: undefined ()\r\n aws-appsync: ^4.1.9 => 4.1.9 \r\n babel-packages: undefined ()\r\n browserify-zlib: undefined ()\r\n browserslist: undefined ()\r\n buffer: undefined ()\r\n bytes: undefined ()\r\n ci-info: undefined ()\r\n cli-select: undefined ()\r\n client-only: 0.0.1 \r\n comment-json: undefined ()\r\n compression: undefined ()\r\n conf: undefined ()\r\n constants-browserify: undefined ()\r\n content-disposition: undefined ()\r\n content-type: undefined ()\r\n cookie: undefined ()\r\n cross-spawn: undefined ()\r\n crypto-browserify: undefined ()\r\n css.escape: undefined ()\r\n data-uri-to-buffer: undefined ()\r\n debug: undefined ()\r\n devalue: undefined ()\r\n domain-browser: undefined ()\r\n edge-runtime: undefined ()\r\n eslint: ^8 => 8.56.0 \r\n eslint-config-next: 14.0.4 => 14.0.4 \r\n events: undefined ()\r\n find-cache-dir: undefined ()\r\n find-up: undefined ()\r\n framer-motion: ^10.17.9 => 10.17.9 \r\n fresh: undefined ()\r\n get-orientation: undefined ()\r\n glob: undefined ()\r\n gzip-size: undefined ()\r\n http-proxy: undefined ()\r\n http-proxy-agent: undefined ()\r\n https-browserify: undefined ()\r\n https-proxy-agent: undefined ()\r\n icss-utils: undefined ()\r\n ignore-loader: undefined ()\r\n image-size: undefined ()\r\n is-animated: undefined ()\r\n is-docker: undefined ()\r\n is-wsl: undefined ()\r\n jest-worker: undefined ()\r\n json5: undefined ()\r\n jsonwebtoken: undefined ()\r\n loader-runner: undefined ()\r\n loader-utils: undefined ()\r\n lodash.curry: undefined ()\r\n lru-cache: undefined ()\r\n micromatch: undefined ()\r\n mini-css-extract-plugin: undefined ()\r\n nanoid: undefined ()\r\n native-url: undefined ()\r\n neo-async: undefined ()\r\n next: 14.0.4 => 14.0.4 \r\n node-fetch: undefined ()\r\n node-html-parser: undefined ()\r\n ora: undefined ()\r\n os-browserify: undefined ()\r\n p-limit: undefined ()\r\n path-browserify: undefined ()\r\n platform: undefined ()\r\n postcss-flexbugs-fixes: undefined ()\r\n postcss-modules-extract-imports: undefined ()\r\n postcss-modules-local-by-default: undefined ()\r\n postcss-modules-scope: undefined ()\r\n postcss-modules-values: undefined ()\r\n postcss-preset-env: undefined ()\r\n postcss-safe-parser: undefined ()\r\n postcss-scss: undefined ()\r\n postcss-value-parser: undefined ()\r\n process: undefined ()\r\n punycode: undefined ()\r\n querystring-es3: undefined ()\r\n raw-body: undefined ()\r\n react: ^18 => 18.2.0 \r\n react-builtin: undefined ()\r\n react-dom: ^18 => 18.2.0 \r\n react-dom-builtin: undefined ()\r\n react-dom-experimental-builtin: undefined ()\r\n react-experimental-builtin: undefined ()\r\n react-icons: ^4.12.0 => 4.12.0 \r\n react-is: 18.2.0 \r\n react-refresh: 0.12.0 \r\n react-server-dom-turbopack-builtin: undefined ()\r\n react-server-dom-turbopack-experimental-builtin: undefined ()\r\n react-server-dom-webpack-builtin: undefined ()\r\n react-server-dom-webpack-experimental-builtin: undefined ()\r\n regenerator-runtime: 0.13.4 \r\n sass-loader: undefined ()\r\n scheduler-builtin: undefined ()\r\n scheduler-experimental-builtin: undefined ()\r\n schema-utils: undefined ()\r\n semver: undefined ()\r\n send: undefined ()\r\n server-only: 0.0.1 \r\n setimmediate: undefined ()\r\n shell-quote: undefined ()\r\n source-map: undefined ()\r\n stacktrace-parser: undefined ()\r\n stream-browserify: undefined ()\r\n stream-http: undefined ()\r\n string-hash: undefined ()\r\n string_decoder: undefined ()\r\n strip-ansi: undefined ()\r\n stripe: ^14.12.0 => 14.12.0 \r\n superstruct: undefined ()\r\n tar: undefined ()\r\n terser: undefined ()\r\n text-table: undefined ()\r\n timers-browserify: undefined ()\r\n tty-browserify: undefined ()\r\n typescript: ^5 => 5.3.3 \r\n ua-parser-js: undefined ()\r\n unistore: undefined ()\r\n util: undefined ()\r\n vm-browserify: undefined ()\r\n watchpack: undefined ()\r\n web-vitals: undefined ()\r\n webpack: undefined ()\r\n webpack-sources: undefined ()\r\n ws: undefined ()\r\n zod: undefined ()\r\n npmGlobalPackages:\r\n @aws-amplify/cli: 12.10.0\r\n apollo: 2.34.0\r\n avo: 3.2.1\r\n corepack: 0.10.0\r\n graphql: 16.6.0\r\n n: 9.2.0\r\n npm: 9.6.7\r\n yarn: 1.22.18\r\n\r\n \r\n```\n\n### Describe the bug\n\nI'm trying to setup a route.ts to listen for Stripe webhooks then make a graphql request to log details of the transaction in dynamo db. I've tried many different approaches following fragments of the Amplify documentation, although I can't find any docs that seem to follow this exact use case? Some of the docs refer to the old NextApiResponse as opposed to the NextResponse in the App Router approach. \r\n\r\nIt sounds like \"cookies\" from next/header is suppose to include the auth information, but how should this be passed in the graphql query? My cookies are always nil in this ssr route. \r\nI'm setting the \"ssr\" to true when I configure amplify in my layout.tsx. \r\n\r\nHelp greatly appreciated! Should it be possible to use Amplify with Next 14? \n\n### Expected behavior\n\nThe most basic functionality of a graphql query to work and be documented. \n\n### Reproduction steps\n\nI can use the Stripe CLI tool to trigger the payment_intent.succeeded. My code executes but the graphql query fails with the error \"No Credentials\". \n\n### Code Snippet\n\n```javascript\r\n// Put your code below this line.\r\nimport { NextRequest, NextResponse } from \"next/server\";\r\nimport Stripe from 'stripe';\r\n// import { generateClient } from 'aws-amplify/api';\r\nimport { createTransaction } from '../../../graphql/mutations';\r\nimport { TransactionInput } from '../../../graphql/API';\r\n\r\n// Amplify ssr\r\nimport { runWithAmplifyServerContext } from '../../../utils/amplifyServerUtils';\r\nimport { generateServerClientUsingCookies } from '@aws-amplify/adapter-nextjs/api';\r\nimport { cookies } from 'next/headers';\r\nimport amplifyConfig from '../../../deployment/amplify-config';\r\n\r\n\r\n// TODO: put in utils \r\nexport const cookieBasedClient = generateServerClientUsingCookies({\r\n config: amplifyConfig,\r\n cookies\r\n});\r\n\r\n\r\nconst stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {\r\n // @ts-ignore\r\n apiVersion: '2022-11-15',\r\n});\r\n\r\nexport async function POST(req: NextRequest) {\r\n if (req.method !== 'POST') {\r\n return new NextResponse(JSON.stringify({ error: 'Method not allowed' }), {\r\n status: 405,\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n },\r\n });\r\n }\r\n\r\n // Cookie debug\r\n const rawCookies = req.headers.get('cookie');\r\n console.log('Raw Cookie String:', rawCookies);\r\n\r\n const sig = req.headers.get('stripe-signature');\r\n let event;\r\n\r\n try {\r\n const body = await readRawBody(req);\r\n event = stripe.webhooks.constructEvent(body, sig!, process.env.STRIPE_WEBHOOK_SECRET!);\r\n } catch (err: any) {\r\n return new NextResponse(JSON.stringify({ error: `Webhook Error: ${err.message}` }), {\r\n status: 400,\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n },\r\n });\r\n }\r\n\r\n switch (event.type) {\r\n case 'charge.succeeded':\r\n console.log('Handling charge.succeeded');\r\n break;\r\n case 'payment_intent.created':\r\n console.log('Handling payment_intent.created');\r\n break;\r\n case 'payment_intent.canceled':\r\n console.log('Handling payment_intent.canceled');\r\n break;\r\n case 'payment_intent.succeeded':\r\n console.log('Handling payment_intent.succeeded');\r\n\r\n const paymentIntentSucceeded = event.data.object as Stripe.PaymentIntent;\r\n\r\n console.log('paymentIntentSucceeded = ', paymentIntentSucceeded);\r\n\r\n const transactionInput: TransactionInput = {\r\n transactionId: paymentIntentSucceeded.id,\r\n userId: '1234', // TODO: get this\r\n amount: paymentIntentSucceeded.amount, \r\n currency: paymentIntentSucceeded.currency,\r\n timestamp: new Date().toISOString(),\r\n status: paymentIntentSucceeded.status, \r\n paymentIntentId: paymentIntentSucceeded.id, \r\n priceId: 'priceId', // TODO: set this \r\n };\r\n\r\n console.log('cookies = ', cookies().getAll());\r\n \r\n try {\r\n const result = await runWithAmplifyServerContext({\r\n nextServerContext: { cookies },\r\n operation: () =>\r\n cookieBasedClient.graphql({\r\n query: createTransaction,\r\n variables: {\r\n transaction: transactionInput\r\n },\r\n }),\r\n });\r\n console.log(\"createTransaction result transactionId = \", result.data.createTransaction?.transactionId);\r\n } catch (error) {\r\n console.log(\"createTransaction failed with error: \", error);\r\n }\r\n break;\r\n default:\r\n console.log('Unhandled Stripe webhook event type:', event.type);\r\n break;\r\n }\r\n\r\n return new NextResponse(JSON.stringify({ received: true }), {\r\n status: 200,\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n },\r\n });\r\n}\r\n\r\n// Helper function to read raw request body\r\nasync function readRawBody(req: NextRequest): Promise {\r\n if (!req.body) {\r\n throw new Error(\"Request body is null\");\r\n }\r\n\r\n const reader = req.body.getReader();\r\n let receivedValue = '';\r\n let done = false;\r\n\r\n while (!done) {\r\n const { value, done: readerDone } = await reader.read();\r\n done = readerDone;\r\n if (value) {\r\n receivedValue += new TextDecoder().decode(value, { stream: true });\r\n }\r\n }\r\n\r\n return receivedValue;\r\n}\r\n\r\n```\r\n\r\n\n\n### Log output\n\n\r\n\r\n```\r\n// Put your logs below this line\r\n\r\n\r\n```\r\n\r\n \r\n\n\n### aws-exports.js\n\n_No response_\n\n### Manual configuration\n\nconst amplifyConfig: ResourcesConfig = {\r\n Auth: {\r\n Cognito: {\r\n userPoolClientId: config.USER_POOL_CLIENT_ID,\r\n userPoolId: config.USER_POOL_ID,\r\n loginWith: { // Optional\r\n oauth: {\r\n domain: 'https://my_domain.auth.us-east-1.amazoncognito.com', \r\n scopes: ['email', 'openid', 'aws.cognito.signin.user.admin'],\r\n redirectSignIn: [config.REDIRECT_SIGN_IN],\r\n redirectSignOut: [config.REDIRECT_SIGN_OUT],\r\n responseType: 'code',\r\n },\r\n username: true, // note: username is their email \r\n email: false, // Optional\r\n phone: false, // Optional\r\n }\r\n }\r\n },\r\n API: {\r\n GraphQL: {\r\n endpoint: config.GRAPHQL_ENDPOINT,\r\n defaultAuthMode: 'iam', \r\n region: config.REGION, // Optional\r\n }\r\n },\r\n};\r\n\r\nexport default amplifyConfig;\n\n### Additional configuration\n\n_No response_\n\n### Mobile Device\n\n_No response_\n\n### Mobile Operating System\n\n_No response_\n\n### Mobile Browser\n\n_No response_\n\n### Mobile Browser Version\n\n_No response_\n\n### Additional information and screenshots\n\n_No response_","reactions":{"url":"https://api.github.com/repos/aws-amplify/amplify-js/issues/12867/reactions","total_count":1,"+1":1,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0},"timeline_url":"https://api.github.com/repos/aws-amplify/amplify-js/issues/12867/timeline","performed_via_github_app":null,"state_reason":null},"comment":{"url":"https://api.github.com/repos/aws-amplify/amplify-js/issues/comments/1903990843","html_url":"https://github.com/aws-amplify/amplify-js/issues/12867#issuecomment-1903990843","issue_url":"https://api.github.com/repos/aws-amplify/amplify-js/issues/12867","id":1903990843,"node_id":"IC_kwDOBkswNc5xfJg7","user":{"login":"Tomekmularczyk","id":12544704,"node_id":"MDQ6VXNlcjEyNTQ0NzA0","avatar_url":"https://avatars.githubusercontent.com/u/12544704?v=4","gravatar_id":"","url":"https://api.github.com/users/Tomekmularczyk","html_url":"https://github.com/Tomekmularczyk","followers_url":"https://api.github.com/users/Tomekmularczyk/followers","following_url":"https://api.github.com/users/Tomekmularczyk/following{/other_user}","gists_url":"https://api.github.com/users/Tomekmularczyk/gists{/gist_id}","starred_url":"https://api.github.com/users/Tomekmularczyk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Tomekmularczyk/subscriptions","organizations_url":"https://api.github.com/users/Tomekmularczyk/orgs","repos_url":"https://api.github.com/users/Tomekmularczyk/repos","events_url":"https://api.github.com/users/Tomekmularczyk/events{/privacy}","received_events_url":"https://api.github.com/users/Tomekmularczyk/received_events","type":"User","site_admin":false},"created_at":"2024-01-22T13:18:52Z","updated_at":"2024-01-22T13:18:52Z","author_association":"NONE","body":"I have a very related problem. It happens with Nextjs v 14.0.2 and above, it doesn't happen with 14.0.1. This happens when navigating as a signed-in user for the first time after deploying the app.\r\n\r\n\"@aws-amplify/api\": \"^5.4.9\",\r\n\"aws-amplify\": \"^5.3.15\",\r\n\r\n```\r\nError: No api-key configured\r\n at e. (/var/task/.next/server/chunks/6453.js:112:27361)\r\n at /var/task/.next/server/chunks/6453.js:75:10081\r\n at Object.next (/var/task/.next/server/chunks/6453.js:75:10186)\r\n at /var/task/.next/server/chunks/6453.js:75:9128\r\n at new Promise ()\r\n at D (/var/task/.next/server/chunks/6453.js:75:8877)\r\n at e._headerBasedAuth (/var/task/.next/server/chunks/6453.js:112:26967)\r\n at e. (/var/task/.next/server/chunks/6453.js:112:29581)\r\n at /var/task/.next/server/chunks/6453.js:75:10081\r\n at Object.next (/var/task/.next/server/chunks/6453.js:75:10186)\r\n```","reactions":{"url":"https://api.github.com/repos/aws-amplify/amplify-js/issues/comments/1903990843/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0},"performed_via_github_app":null}},"public":true,"created_at":"2024-01-22T13:18:54Z","org":{"id":41077760,"login":"aws-amplify","gravatar_id":"","url":"https://api.github.com/orgs/aws-amplify","avatar_url":"https://avatars.githubusercontent.com/u/41077760?"}}]