Troubleshooting

Common issues & fixes.

This page covers common issues you may run into while setting up or running Ani-Visuals locally along with their solutions.

🧪 Environment Variables Not Loading

Symptoms:

  • Features relying on the GROK API fail silently or throw errors

  • process.env variables appear undefined inside the app

Solution:

  • Ensure your .env file is in the root of the project (same level as package.json)

  • Variable names must match exactly (e.g. GROK_API_KEY)

  • Restart the dev server after any changes — Vite does not reload .env files automatically

🚫 Port Conflict on Dev Server

Symptoms:

  • Running npm run dev or yarn dev throws:

    Error: listen EADDRINUSE: address already in use :::3000

Solution:

  • Close the process using the port (e.g., another dev server or app)

  • Or run the dev server on a different port:

Port Conflict on Development Server

Symptoms:

  • Running npm run dev or yarn dev results in an error like: Error: listen EADDRINUSE: address already in use :::3000

Solution:

  • Identify and close the process occupying the port (e.g., another app, old dev server).

  • Alternatively, start the dev server on a different port:

    Copy

    npm run dev -- --port=4000

TypeScript Compilation Errors

Symptoms:

  • Build or dev server fails due to TypeScript errors.

  • Editor or terminal shows type mismatch or missing prop errors.

Solution:

  • Make sure you’re running Node.js v16 or higher as required by the project.

  • Run npm install or yarn install to ensure all dependencies and types are correctly installed.

  • Verify that any custom components or modifications include proper TypeScript typings.

TailwindCSS Styles Not Applying

Symptoms:

  • UI renders without expected Tailwind styling (no colors, spacing, or fonts).

  • Console warnings about missing styles or content paths.

Solution:

  • Verify tailwind.config.ts includes correct content paths:

    Copy

    content: ['./src/**/*.{ts,tsx}'],

Confirm you have imported Tailwind base styles in your main CSS entry (usually index.css or main.css):

Copy

@tailwind base;
@tailwind components;
@tailwind utilities;

Restart the dev server after any Tailwind config changes.

If you encounter other issues or bugs not covered here, consider opening an issue in the project’s GitHub repository with detailed reproduction steps.

PreviousClone, Install, and Run LocallyNextSolana Integration

Last updated