Errors

In this guide, we will talk about some common errors that might occur when using Componefy components in your project. These errors are usually related to the setup of TailwindCSS, or issues with integrating our components into your framework. Don't worry — most of these errors are easy to fix with a bit of troubleshooting!

Before we dive into potential errors, ensure that you've properly set up TailwindCSS and any necessary dependencies for your framework (React, Vue, or Svelte). This guide will walk you through some common issues and how to resolve them.

If you're experiencing issues, it's often due to missing configurations or improper setup of TailwindCSS. Make sure you've followed the setup instructions for your framework carefully before reaching out for support.

Common Issues and Solutions

Below is a list of common errors that users encounter while integrating Componefy components. Each issue is accompanied by a solution to help you get back on track.

TailwindCSS Not Working

This typically happens if TailwindCSS is not properly set up in your project.

Solution: Ensure that TailwindCSS is installed and configured correctly. Check your tailwind.config.js file and make sure you’ve added the correct paths to your content (e.g., ./src/**/*.{html,js,jsx,ts,tsx}). Also, make sure to restart your development server after any configuration changes.

Component Styles Not Showing

If the styles for a component aren't displaying, this is likely due to missing TailwindCSS classes or improper imports.

Solution: Double-check that you’ve included the correct TailwindCSS CDN or that it's properly installed in your project. Ensure you're importing the correct CSS file in your entry point (e.g., index.css for React projects).

Build Issues in React/Vue/Svelte

You may encounter build errors if there are issues with how components are integrated into your framework.

Solution: Check the error messages carefully. For React, ensure that you're using the correct JSX syntax. In Vue, make sure you’ve correctly imported the components. For Svelte, ensure that your <script> tag is properly set up and that the component path is correct.

TailwindCSS Configuration Errors

A common source of errors is improper TailwindCSS configuration. Ensure that you’ve included the right paths in your tailwind.config.js file to let Tailwind process all your HTML and framework files. Here's an example of a basic tailwind.config.js setup:

tailwind.config.js

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Make sure to also include any custom paths if your project structure is different.

Error types

Sometimes, errors are related to the way Componefy components are integrated into your project. Understanding the type of error can help you troubleshoot faster.

Name
missing_dependency
Description
This error occurs when a required dependency like TailwindCSS is not installed or configured properly.
Name
invalid_syntax
Description
This error means there is a syntax error in your code. Double-check the code you copied from Componefy, and ensure it matches the structure required by your framework.

Error Example

{
  "type": "missing_dependency",
  "message": "TailwindCSS is not configured. Please check your setup and try again.",
  "documentation_url": "https://componefy.com/docs/errors/missing_dependency"
}

What's next?

Once you've resolved any errors, you can continue integrating Componefy components into your project. If you run into more issues, here are a few resources to help you troubleshoot further: