/wasp/ cannot find module
@kapa.ai What would be missing in the config file to cause /wasp/modules/ to show as not found within a js/ts file?
11 Replies
Hi @enlightenmental. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the knowledge sources, there are several reasons why you might be seeing "cannot find module 'wasp/...' or its corresponding type declarations" errors in your Wasp project:
1. Missing SDK compilation: The Wasp compiler needs to run first to generate the SDK with all the
wasp/* packages. If you haven't run wasp start yet, the compiler hasn't had a chance to generate these modules.
2. Broken .wasp folder: Sometimes the .wasp folder can get into a broken state. You can fix this by running:
This will delete the .wasp folder and node_modules, then reinstall everything when you start again.
3. Import extension issues: In ESM modules (which Wasp uses), relative imports require file extensions. If you're importing a file without an extension (like import { something } from './util' instead of import { something } from './util.js'), this can cause module not found errors.
4. Incorrect import paths: Make sure you're importing from the correct path. For example, Link should be imported from wasp/client/router not from wasp/client/operations.
5. tsconfig.json issues: Wasp generates "dummy" tsconfig.json files in your project directories to provide proper IDE support. If these files have been deleted or modified, it could cause module resolution problems.
If you're seeing these errors in your IDE but the app still runs correctly, it might be an IDE configuration issue rather than an actual runtime problem.
Discord support thread suggests that running wasp clean followed by wasp start often resolves these types of issues.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @enlightenmental, 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?@kapa.ai The app runs correctly. What IDE change can be made to silence these errors?
Let me check the knowledge base for you again. One moment! :books:
----------------------
Based on the knowledge sources, if your app runs correctly but your IDE is showing "cannot find module 'wasp/...'" errors, there are a few IDE-specific solutions you can try:
1. For VSCode users: The issue is related to how the IDE handles the special
@wasp imports that don't physically exist in your project structure but are generated during compilation. This is a known issue in Wasp projects.
2. Possible solution - Modify schema.prisma: One community member reported success by modifying the output path in schema.prisma:
However, this is considered a temporary fix and not officially recommended as mentioned in the Discord support thread.
3. Wait for official IDE integration: The Wasp team is actively working on proper IDE integration. There's an open RFC discussing various approaches including virtual workspaces that would make the IDE "see" the generated code structure correctly. This is tracked in GitHub Issue #604.
4. Use jsconfig.json workaround: While not perfect, adding a jsconfig.json file to your project root can help with some IDE issues:
This approach has limitations but might reduce some of the IDE errors.
The Wasp team acknowledges this is a pain point and is working on a more permanent solution through proper IDE extensions and integration.
Remember that these errors are purely in the IDE and don't affect the actual functionality of your app, which is why it runs correctly despite the warnings.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @enlightenmental, 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?@kapa.ai if my tsconfig.json uses
"outDir": ".wasp/out/user", and a ts file uses import { type AuthUser } from 'wasp/auth'; what would the paths value be?Let me check the knowledge base for you again. One moment! :books:
----------------------
Based on the knowledge sources, I can help explain the correct
paths configuration for your tsconfig.json file.
If you're using "outDir": ".wasp/out/user" in your tsconfig.json and experiencing issues with imports like import { type AuthUser } from 'wasp/auth', you need to properly configure the paths property to help TypeScript resolve these imports.
In Wasp 0.12.0 and later, the import structure changed (no more client and server separation), and the SDK is now installed as a local npm package. The import paths have changed from patterns like @wasp/... to wasp/....
Based on the information in the knowledge sources, your paths configuration should look something like this:
This configuration tells TypeScript to look for imports starting with wasp/ in the .wasp/out/sdk/wasp/ directory, which is where the Wasp SDK is typically installed.
However, it's worth noting that the exact path might vary depending on your specific Wasp version and setup. The Wasp team is still working on improving the TypeScript configuration story as mentioned in GitHub Issue #1430.
If you're still experiencing issues, you might need to run wasp clean followed by wasp start to ensure the SDK is properly generated and installed.
Remember that these IDE errors don't affect the actual functionality of your app if it's running correctly, as you mentioned earlier.
Migration from 0.11.X to 0.12.0
If you recently migrated from Wasp 0.11.X to 0.12.0, note that import paths have changed. For example, import { login } from 'wasp/auth/email' should now be import { login } from 'wasp/client/auth' as mentioned in the Discord support thread.
The Wasp team is actively working on better IDE integration to solve these issues more permanently, as discussed in GitHub Issue #604.
Is there anything specific about your project setup that might be causing these import resolution issues?
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @enlightenmental, 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?@kapa.ai in main.wasp, can I change the app name
app ThisNameHere { }Let me check the knowledge base for you again. One moment! :books:
Wohooo @enlightenmental, you just became a Waspeteer level 1!
----------------------
Yes, you can change the app name in your
main.wasp file, but there are some important considerations to keep in mind:
App Name Requirements
The app name in your main.wasp declaration must be a valid Wasp identifier, which means:
- It can start with a letter or an underscore
- It can contain only letters, numbers, or underscores
- It can't be a Wasp keyword (like "app" itself)
For example:
Important Distinctions
There's a difference between:
1. The app declaration name (MyNewAppName in the example above)
2. The app title (which appears in the browser tab)
You can change both independently. The title can be any string, while the declaration name must follow identifier rules.
Naming Limitations
Wasp doesn't support kebab-case (dashes) in the app declaration name, though there have been discussions about improving this. If you try to use a name with dashes, you'll encounter parser errors GitHub Issue #590.
Numbers are allowed in app names, but they cannot be the first character GitHub Issue #438.
Remember that changing the app name in an existing project might require additional adjustments to your code if you have references to the app name elsewhere.
Would you like more specific guidance on renaming your app?
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @enlightenmental, 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?@kapa.ai I assume I then need to rebuild the database?
Let me check the knowledge base for you again. One moment! :books:
----------------------
If you're changing just the app name in your
main.wasp file (the identifier in app ThisNameHere {}), you don't necessarily need to rebuild the database. The app name in the Wasp file is primarily used for the Wasp compiler's internal references and doesn't directly affect your database schema.
However, if you've made other changes to your Wasp file that affect your data model (like modifying entities or relationships), then you would need to run database migrations.
If you want to be thorough after changing your app name, you can:
1. Run wasp db migrate-dev to create and apply any necessary migrations
2. Or if you're starting fresh and don't care about existing data, you can run wasp db reset to completely reset your database
As mentioned in the Wasp tutorial documentation, you typically need to run migrations when you change entity definitions:
For deployed applications, you would follow a similar process as described in the deployment documentation, which includes rebuilding your app with wasp build and then redeploying.
Is there a specific reason you're concerned about rebuilding the database after changing the app name?
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @enlightenmental, 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?