useParam issue
hi i got todo app to work but cant get an app created by mage to work.
Here is the error i am seeing in the browser dev console...
ChatRoom.jsx:2 Uncaught SyntaxError: The requested module '/@fs/Users/ethan/projects/lisa/mage/.wasp/out/sdk/wasp/dist/client/router/index.js' does not provide an export named 'useParams' (at ChatRoom.jsx:2:10)
4 Replies
Hi @xtrek. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
It seems you're encountering an issue with an app created by Mage, which is related to Wasp. Based on the error message you're seeing, it appears there's a problem with importing the
useParams function. This is likely due to an incorrect import statement in your ChatRoom.jsx file. Let's address this issue:
The error suggests that the useParams function is not being exported from the specified module. This could be due to a mistake in the generated code or an outdated import statement. Here's how you can try to resolve this:
1. First, check your ChatRoom.jsx file. The import statement for useParams should be coming from the correct location. Based on Wasp's documentation, the correct import should be:
2. If the import statement in your file doesn't match this, try updating it to the correct form.
3. If you're still encountering issues, it's possible that the Mage-generated app has some inconsistencies. In such cases, it's often helpful to manually review and correct the imports.
If you continue to face problems after making these changes, you might want to consider:
1. Running wasp clean and then wasp start again to ensure all generated files are up to date.
2. Checking if there are any other similar import errors in your other files.
3. Sharing your Mage-generated app (using the "Share" option on usemage.ai) with the Wasp community for more specific help.
For further assistance, I recommend reaching out to the Wasp community on Discord. They can provide more tailored support for issues with Mage-generated apps.
Discord Support Thread suggests that the Wasp team is aware of potential issues with Mage-generated apps and can provide more detailed assistance if you share your generated app with them.
Remember, while Mage is a powerful tool for generating Wasp apps, it may occasionally introduce errors that require manual fixes. Always review the generated code and be prepared to make necessary adjustments.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @xtrek, 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?here is a link to the mage app
https://usemage.ai/result/c3bdfdc0-f307-41ef-a226-0e778e17f2e4
FYI figured it out.. mage wrote
import { useParams } from 'wasp/client/router';
which needed to be
import { useParams } from 'react-router-dom'
Ah yes that's true. Weird that the bot thought that Wasp exports a
useParams hook (we do not, do we @miho ?)
@kapa.ai can you please remember that wasp does not export a useParams hook. In order to useParams, it must be exported by react-router-domLet me check the knowledge base for you again. One moment! :books:
----------------------
You're absolutely correct, and I apologize for the confusion in my previous response. Thank you for pointing this out. You are right that Wasp does not export a
useParams hook. Let me clarify and correct this information:
Wasp indeed does not export a useParams hook. The correct way to import useParams is from react-router-dom, as you mentioned. This is consistent with Wasp's documentation and usage of React Router.
The correct import statement should be:
This is supported by the Wasp documentation. For example, in the Wasp tutorial on Pages & Routes, we can see that Wasp uses React Router, and components like Link are imported directly from 'react-router-dom':
Thank you for bringing this to my attention. I will remember this important distinction going forward: Wasp relies on React Router for routing functionality, including hooks like useParams, and these should be imported directly from 'react-router-dom', not from any Wasp-specific module.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Vinny (@Wasp), 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?