mirror of
https://github.com/wasp-lang/wasp.git
synced 2024-09-11 15:26:19 +03:00
Fix import/export JS errors in Mage (#1607)
This commit is contained in:
parent
994a58f0dc
commit
e41fc5792c
@ -93,7 +93,7 @@ waspFileExample =
|
||||
component: import Login from "@client/pages/auth/Login.jsx"
|
||||
}
|
||||
|
||||
route DashboardRoute { path: "/", to: Dashboard }
|
||||
route DashboardRoute { path: "/", to: DashboardPage }
|
||||
page DashboardPage {
|
||||
authRequired: true,
|
||||
component: import Dashboard from "@client/pages/Dashboard.jsx"
|
||||
|
@ -109,11 +109,18 @@ generatePage newProjectDetails entityPlans queries actions pPlan = do
|
||||
|
||||
Example of such JSON:
|
||||
{
|
||||
"pageWaspDecl": "route ExampleRoute { path: \"/\", to: ExamplePage }\npage ExamplePage {\n component: import { ExamplePage } from \"@client/ExamplePage.jsx\",\n authRequired: true\n}",
|
||||
"pageWaspDecl": "route ExampleRoute { path: \"/\", to: ExamplePage }\npage ExamplePage {\n component: import ExamplePage from \"@client/ExamplePage.jsx\",\n authRequired: true\n}",
|
||||
"pageJsImpl": "JS imports + React component implementing the page.",
|
||||
}
|
||||
There should be no other text in the response.
|
||||
|
||||
When writing the javascript implementation, make sure to always use the default export.
|
||||
Concretely, define the main component with `const ${pageName} = () => {...}`,
|
||||
and then at the end export it with `export default ${pageName}`.
|
||||
It is also really important that the ${pageName} is then imported as a default import
|
||||
in "pageWaspDecl": use `import ${pageName}` instead of `import { ${pageName} }`.
|
||||
This is very important to me, please do as I say.
|
||||
|
||||
${appDescriptionBlock}
|
||||
|]
|
||||
|
||||
@ -127,7 +134,7 @@ makePageDocPrompt =
|
||||
```wasp
|
||||
route TasksRoute { path: "/", to: ExamplePage }
|
||||
page TasksPage {
|
||||
component: import { Tasks } from "@client/Tasks.jsx",
|
||||
component: import Tasks from "@client/Tasks.jsx",
|
||||
authRequired: true
|
||||
}
|
||||
```
|
||||
@ -142,7 +149,7 @@ makePageDocPrompt =
|
||||
import createTask from '@wasp/actions/createTask';
|
||||
import toggleTask from '@wasp/actions/toggleTask';
|
||||
|
||||
export function Tasks() {
|
||||
const Tasks = () => {
|
||||
const { data: tasks, isLoading, error } = useQuery(getTasks);
|
||||
const createTaskFn = useAction(createTask);
|
||||
const toggleTaskFn = useAction(toggleTask);
|
||||
@ -193,6 +200,7 @@ makePageDocPrompt =
|
||||
);
|
||||
}
|
||||
|
||||
export default Tasks;
|
||||
```
|
||||
|
||||
Here's another example of a Page declaration in Wasp:
|
||||
@ -200,7 +208,7 @@ makePageDocPrompt =
|
||||
```wasp
|
||||
route DashboardRoute { path: "/dashboard", to: DashboardPage }
|
||||
page DashboardPage {
|
||||
component: import { Dashboard } from "@client/Dashboard.jsx",
|
||||
component: import Dashboard from "@client/Dashboard.jsx",
|
||||
authRequired: true
|
||||
}
|
||||
```
|
||||
@ -215,7 +223,7 @@ makePageDocPrompt =
|
||||
import getUsers from '@wasp/queries/getUsers';
|
||||
import deleteUser from '@wasp/actions/deleteUser';
|
||||
|
||||
export function DashboardPage() {
|
||||
const DashboardPage = () => {
|
||||
const { data: users, isLoading, error } = useQuery(getUsers);
|
||||
const deleteUserFn = useAction(deleteUser);
|
||||
|
||||
@ -250,6 +258,8 @@ makePageDocPrompt =
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DashboardPage;
|
||||
```
|
||||
|
||||
Make sure to style the page with Tailwind CSS and make it as beautiful as possible.
|
||||
|
@ -169,6 +169,7 @@ fixPageComponent newProjectDetails waspFilePath pageComponentPath = do
|
||||
- If there are any js imports of local modules (`from "./`, `from "../`),
|
||||
remove them and instead add the needed implementation directly in the file we are fixing right now.
|
||||
- Remove redundant imports, but don't change any of the remaining ones.
|
||||
- Make sure that the component is exported as a default export.
|
||||
|
||||
With this in mind, generate a new, fixed React component (${pageComponentPathText}).
|
||||
Do actual fixes, don't leave comments with "TODO"!
|
||||
|
@ -82,7 +82,7 @@ generatePlan newProjectDetails planRules = do
|
||||
"pages": [{ "pageName": string, "componentPath": string, "routeName": string, "routePath": string, "pageDesc": string }]
|
||||
}
|
||||
|
||||
Here is an example of a plan (a bit simplified, as we didn't list all of the entities/actions/queries/pages):
|
||||
Here is an example of a plan (a bit simplified, as we didn't list all of the entities/actions/queries/pages):
|
||||
|
||||
{
|
||||
"entities": [{
|
||||
|
@ -90,12 +90,20 @@ fixWaspFile newProjectDetails waspFilePath plan = do
|
||||
${compileErrorsText}
|
||||
|
||||
Some common mistakes to look for:
|
||||
- Using non-default imports in page components.
|
||||
In a Wasp `page` declaration, the `component` should always use the "default import" JS syntax.
|
||||
Instead of `component: import { PageName } from ...`, it should
|
||||
always be `component: import PageName from ...`.
|
||||
Fix these by identifying named imports in wasp `page` declarations, and replacing
|
||||
them with default imports. This only relates to wasp `page` declarations, other parts
|
||||
of a Wasp file do not have to use the default imports.
|
||||
|
||||
- Missing ',' between dictionary entries, for example before `entities` field in action/query.
|
||||
Fix these by adding missing ','.
|
||||
For example, the following is missing ',' after the component field:
|
||||
```wasp
|
||||
page ExamplePage {
|
||||
component: import { ExamplePage } from "@client/pages/ExamplePage.jsx" // <- missing ','
|
||||
component: import ExamplePage from "@client/pages/ExamplePage.jsx" // <- missing ','
|
||||
authRequired: true
|
||||
}
|
||||
```
|
||||
|
Loading…
Reference in New Issue
Block a user