Next.js 14 + Browser SDK v2
Hi Community frens
I'm implementing FullStory into a Next.js app I've built. Capture initializes and works as expected.
That said, I'm having trouble calling the SDK's api in my components. You can see it live at https://fs-slackmojis.netlify.app/
When you click on an emoji, the session url should be logged to the console. Instead, the browser throws this error:
Uncaught TypeError: _fullstory_browser__WEBPACK_IMPORTED_MODULE_4__ is not a function
^ Pls note that is the error shown on localhost during debug. In production the error is:Uncaught TypeError: w is not a function due to webpack build stuff. It's the same error though, just obfuscated. Source map is live in prod though, so you can see the live code as well.
Here's my project layout:
root/
└── src/
│
├── app/
│ └── (frontend)/
│ │
│ ├── emojis/
│ │ └── page.tsx // Page where EmojiCard component is used
│ │
│ └── layout.tsx // FS is initalized here and the emojis/page.tsx is loaded here as well
│
└── components/
│
└── EmojiCard.tsx // I attempt to call FS api here
The code is available on GitHub as well.
Here's where I initialize FullStory and here's where I try to get a session URL from a component.
I'm new to Next.js and I'm curious if anyone else has run into something similar or has tips on how to implement FS in a Next app a bit better.
---
PS:
The app is built using Next.js 14.2 and I've implemented their app router, not the page router.
Comments
2 comments
aha! I finally figured it out.
My import for FS in the component was incorrect. I needed to change the syntax and then things started working. Found the right stuff in the docs. 🤦♂️
Hey RC Maples ! You're a star.
Thanks for sharing an update on your findings. As always, please don't hesitate to reach out if there's anything else we can assist you with (or you can assist yourself with.) :)
Please sign in to leave a comment.