Add Dependencies to wasp project
I tried to run "npm install -D @headlessui/react @heroicons/react" But this broke the wasp project, now it route directly to the directory listing. Does anyone know how to correctly include dependencies in a wasp project? Thank you very much!
5 Replies
Hi @developwitheddy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
In a Wasp project, dependencies are defined in a standard way for JavaScript projects: using the
package.json file, located at the root of your project. You can list your dependencies under the dependencies or devDependencies fields. To add a new package, you use npm install command. For example, to add date-fns, you would run npm install date-fns. This command will add the package in the dependencies section of your package.json file[^1^].
However, there are some restrictions. If Wasp is already internally using a certain dependency (e.g. React) with a certain version specified, you are not allowed to define that same npm dependency yourself while specifying a different version. If you do that, you will get an error message telling you which exact version you have to use for that dependency[^1^].
In the new structure of a Wasp project, Wasp dependencies are split into 4 groups[^5^]:
1. Project and user dependencies - listed in package.json.
2. SDK dependencies - listed in node_modules/wasp/package.json.
3. Server dependencies - listed in .wasp/out/server/package.json.
4. Client dependencies - listed in .wasp/out/web-app/package.json.
You should identify which dependencies belong to which "project" (some dependencies might be required in multiple projects) and modify the generator to output appropriate package.json files[^5^].
If you are migrating from an older version of Wasp, you might need to adjust your package.json file to list the necessary dependencies[^3^].
[^1^]: (source: https://wasp-lang.dev/docs/project/dependencies)
[^3^]: (source: https://wasp-lang.dev/docs/migrate-from-0-11-to-0-12#migrating-your-project-to-the-new-structure)
[^5^]: (source: https://github.com/wasp-lang/wasp/issues/1595)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @developwitheddy, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?Are you sure your
wasp start is running correctly? What are you seeing in your terimnal?@developwitheddy you probably don't want to install those with
-D, those are not dev dependencies, but actual dependencies.
Other than that, you should be fine -> these deps should be added to package.json and used appropriately.
Do a wasp clean just to make sure there is not some kind of transient issue.
That localhost:3000 you got there -> how did you get there? Thta is quite specific what you have there, on what kind of setup are you running? Do you have additional static server you are using during dev or something like that?Thank you @martinsos again! Yes, I figured it out, it is cause by installing , because wasp already using the "@headlessui/react": "1.7.13" library. After I broke the project, I have to close down the browser and rebuilt the project, and everything work now. And I tried to install and it works!
Ah got it! Didn't Wasp warn you though about the conflict with its own dependencies?