Wasp-lang•3w ago

router.tsx:7 Uncaught SyntaxError: The requested module '/@fs/home/rootall/apps/minisaas-boilerplate

router.tsx:7 Uncaught SyntaxError: The requested module '/@fs/home/rootall/apps/minisaas-boilerplate/app/src/auth/LoginPage.tsx' does not provide an export named 'default' (at router.tsx:7:8) why? loginpage.tsx: import { Link } from 'react-router-dom'; import { LoginForm } from 'wasp/client/auth'; export const LoginPage = () => { return ( <div style={{ maxWidth: '400px', margin: '0 auto' }}> <LoginForm /> <br /> <span> I don't have an account yet (<Link to="/signup">go to signup</Link>). </span> </div> ); }; main.wasp: route LoginRoute { path: "/login", to: LoginPage } page LoginPage { component: import Login from "@src/auth/LoginPage" }

1 Reply

kapa.ai•3w ago

Hi @NEROX. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error you're encountering is due to a mismatch between how you're exporting the LoginPage component and how you're importing it in your main.wasp file. Let's break down the issue and provide a solution: 1. In your LoginPage.tsx file, you're using a named export:

export const LoginPage = () => {
  // ...
};

export const LoginPage = () => {
  // ...
};

2. However, in your main.wasp file, you're trying to import it as a default export:

page LoginPage {
  component: import Login from "@src/auth/LoginPage"
}

page LoginPage {
  component: import Login from "@src/auth/LoginPage"
}

To fix this issue, you have two options: Option 1: Change the import in main.wasp to use a named import:

page LoginPage {
  component: import { LoginPage } from "@src/auth/LoginPage"
}

page LoginPage {
  component: import { LoginPage } from "@src/auth/LoginPage"
}

Option 2: Change the export in LoginPage.tsx to be a default export:

const LoginPage = () => {
  // ...
};

export default LoginPage;

const LoginPage = () => {
  // ...
};

export default LoginPage;

The first option is more consistent with the examples provided in the Wasp documentation. For instance, in the Adding Login and Signup Pages (https://wasp-lang.dev/docs/tutorial/auth#adding-login-and-signup-pages) section of the Wasp tutorial, they use named imports:

page LoginPage {
  component: import { LoginPage } from "@src/LoginPage"
}

page LoginPage {
  component: import { LoginPage } from "@src/LoginPage"
}

By making this change, your code should align with the expected export/import pattern, and the error should be resolved. Remember, when using named exports, you need to use curly braces {} in the import statement, and the names must match exactly. When using default exports, you don't use curly braces, and you can import using any name you choose. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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?

Gaming

Programming

router.tsx:7 Uncaught SyntaxError: The requested module '/@fs/home/rootall/apps/minisaas-boilerplate