Skip to main content

Trouble shooting the Web SDK with frameworks

Below are common issues across all frameworks.

Script bundling error​

Cause: the SDK script was bundled by Vite, Webpack, or another bundler instead of being loaded via a script tag.

Solution: move the SDK to a <script> tag in your index.html file.

Component not rendering​

Cause: the component's mount() method was called before the DOM element exists.

Solution: in frameworks, always call mount() inside the appropriate lifecycle hook after the DOM is ready:

  • Vue: onMounted()
  • React: useEffect() with empty dependency array
  • Angular: ngAfterViewInit()

Memory leaks​

Cause: the SDK components are not cleaned up when the parent component is destroyed.

Solution: call unmount() on SDK components in the framework's cleanup lifecycle:

  • Vue: onUnmounted()
  • React: return cleanup function from useEffect()
  • Angular: ngOnDestroy()

Token is undefined after submit​

Cause: the tokenize() callback is asynchronous, but the code attempts to use the token synchronously.

Solution: handle the token inside the callback function or use async/await patterns.