troubleshooting

Name: troubleshooting
Availability: InStock
Author: Subbly

Verify environment variables and Subbly API initialization in Next.js applications.

Updated Jul 15, 2025

Search Tags:#developer tools #troubleshooting #api #integration #next.js #subbly

Ready to run

npx skills add https://github.com/subbly/builder-starter-template --skill troubleshooting-subbly

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: troubleshooting
Source: https://github.com/subbly/builder-starter-template/tree/main/skills/troubleshooting
Command: npx skills add https://github.com/subbly/builder-starter-template --skill troubleshooting-subbly

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This guide helps developers resolve common integration issues with the Subbly Next.js application, ensuring essential configuration files are correct and Subbly features function as expected.

Core Features & Use Cases

Environment Variable Verification: Troubleshoot missing or incorrectly prefixed API keys.
Subbly API Initialization: Ensure the Subbly API client is correctly initialized and available.
Provider and Widget Setup: Guide users to correctly wrap their application with SubblyProvider and include the SubblyScript.
Common Error Resolution: Address issues like cart not opening, API returning 404s, and TypeScript errors.
Use Case: A developer is encountering a "subblyApi is not initialized" error in their Next.js application. They can use this skill to quickly identify that the api.ts file needs to be imported in layout.tsx to ensure proper initialization.

Quick Start

Use the troubleshooting skill to verify your Subbly API key is correctly set in the .env file.

Frequently Asked Questions about troubleshooting

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

Why does my Next.js app throw a subblyApi is not initialized error?▼

The subblyApi initialization error occurs when the api.ts file is not imported in layout.tsx. You must import the Subbly API client in your Next.js root layout to ensure proper initialization across the application.

How do I fix a Subbly cart widget that is not opening in Next.js?▼

To fix a non-functional Subbly cart widget, ensure you have correctly wrapped your application with SubblyProvider and included the SubblyScript component in your Next.js layout to load the required widget scripts.

What causes a 404 error from the Subbly API in a Next.js integration?▼

A 404 error from the Subbly API is typically caused by missing or incorrectly prefixed API keys. Verify your environment variables in the .env file to ensure the API client has valid credentials for requests.

Do I need SubblyProvider to use Subbly integration features in Next.js?▼

Yes, you need SubblyProvider to wrap your Next.js application. Correct provider setup ensures the Subbly API context is available throughout your component tree, preventing context errors and enabling widget functionality.

How do I resolve TypeScript errors when integrating the Subbly API client?▼

Resolving TypeScript errors with the Subbly API client requires adhering to specific file structures and import patterns within your Next.js project. Ensure your imports match the expected Subbly integration paths for type safety.