Concerns and Difficulties Encountered While Using Your Library with Vite.js

[bkyerv]

The library, as it seems, works smoothly with Next.js. However, I have found that the same does not hold true when integrating it with a Vite.js project. Even when utilizing the Command Line Interface (CLI) for the setup, thus avoiding manual configuration, I have come across numerous errors.

The main issue arises when defining the path in the tsconfig.json file. Interestingly, even after successfully setting it up, the library appears to require additional configuration within the vite.config.js file. This requirement is not explicitly mentioned in the documentation and can be a cause of confusion for users.

Moreover, while the tailwindconfig file seems to be configured accurately, the index.css file does not undergo the necessary changes for proper tailwind setup. As a result, shadcn styles do not appear to be correctly applied.

I have also attempted a manual setup for the library, hoping it would resolve the aforementioned issues. However, this has only led me to encounter a plethora of misconfiguration errors, and the styles remain improperly applied.

I am eager to continue using this library, given its beneficial features. However, these problems have posed significant challenges to its effective integration in my project. It would be immensely helpful if you could provide some guidance on these issues, or consider enhancing the library's compatibility with Vite.js.

[dan5py]

I agree that the documentation lacks clarity regarding the supported frameworks for the CLI. When using the "init" command, the CLI assumes Next.js with TypeScript and Tailwind CSS (you can find more information about this assumption here). For now, if a different framework is being used, you should go for the manual installation process.

I fully understand the need for CLI compatibility with different frameworks. It would be beneficial to incorporate optional parameters such as --vite or --svelte to provide support for a wider range of frameworks.

[GuiLucas]

Another suggestion for the use case when you need to run init on a project that was already configured.
I want to use the Form component so this was the only way. Although my tailwind config was completely overridden, maybe it should check if there's a config already and add the necessary config to the existing file.

[dan5py]

Hi @GuiLucas, when you need to only use a single component, I suggest going for the manual installation without using the CLI, so you can just add what you need.

Although my tailwind config was completely overridden, maybe it should check if there's a config already and add the necessary config to the existing file.

However thanks for this suggestion!

[dan5py]

UPDATE: docs for Vite and Remix are under development (PR #753) 🚀

[GuiLucas]

Hi @GuiLucas, when you need to only use a single component, I suggest going for the manual installation without using the CLI, so you can just add what you need.

For sure! Maybe I didn't look into it enough but the docs on Form component do not have manual installation, the only way is to use the CLI. Link to Form docs

[dan5py]

Yes, at the moment they're not available. We're working to bring it back as soon as possible.

[dan5py]

@GuiLucas I just made a PR (#768) that brings back the full manual installation for both Form and Toast components.

[somahargitai]

I tried a simple install with Vite and React and instantly ran into an error in vite.config.ts:

Cannot find module '@vitejs/plugin-react' or its corresponding type declarations.ts(2307)

I tried to solve it by installing the plugin manually, but then I also got confused when @ components folder was placed inside the root and I did not really now where I should put my own component using the example button component, because if I put it in src, it simply cannot import button.

Please make the tutorial so straightforward that simply by following the steps I never get an error and I end up having one library component, used to create one custom component, which is used in a page - with zero errors.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.