미기
Explore posts from serversInternal Server Error - Make sure your app is wrapped in a <Router />
I used bunx create-solid to make the project, but when I set
const navigate = useNavigate() and navigate("/somewhere"), I get the error.
Maybe error on the template or error of solid router?
repository: https://github.com/issac4892/EVIS-solidstart
https://github.com/issac4892/EVIS-solidstart/blob/main/src/routes/personal_code.tsx
https://evis.vercel.app/personal_code (input anything there and press the blue button)2 replies
SolidStart error on redirect
Hello, I'm a newcomer to SolidJS and SolidStart. I am trying to redirect from one page to another, but it gives me an error while I do
(continuing below)
return redirect("/inquiry/" + form.get("personalCode"));. The site loads well if I refresh the page or go to the page directly.
The Error
Internal Server Error (Make sure your app is wrapped in a <Router />)
This error happened inside a server function and you didn't handle it. So the client will receive an Internal Server Error. You can catch the error and throw a ServerError that makes sense for your UI. In production, the user will have no idea what the error is:
Error: Make sure your app is wrapped in a <Router />
at Module.invariant (/Users/mingeon/Algorix/evis-solid/node_modules/@solidjs/router/dist/utils.js:33:15)
at useRouter (/Users/mingeon/Algorix/evis-solid/node_modules/@solidjs/router/dist/routing.js:18:47)
at useRoute (/Users/mingeon/Algorix/evis-solid/node_modules/@solidjs/router/dist/routing.js:21:90)
at Module.useParams (/Users/mingeon/Algorix/evis-solid/node_modules/@solidjs/router/dist/routing.js:54:25)
at Object.$$serverHandler0 (/Users/mingeon/Algorix/evis-solid/src/routes/inquiry/[code].tsx:30:47)
at execute (/Users/mingeon/Algorix/evis-solid/node_modules/solid-start/server/server-functions/server.ts:189:37)
at Object.fn (/Users/mingeon/Algorix/evis-solid/node_modules/solid-start/server/server-functions/server.ts:201:12)
at Module.handleServerRequest (/Users/mingeon/Algorix/evis-solid/node_modules/solid-start/server/server-functions/server.ts:164:34)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async eval (/Users/mingeon/Algorix/evis-solid/node_modules/solid-start/server/middleware.ts:39:30)
at async eval (/Users/mingeon/Algorix/evis-solid/node_modules/solid-start/api/middleware.ts:40:12)
at async eval (/Users/mingeon/Algorix/evis-solid/node_modules/solid-start/entry-server/StartServer.tsx:45:12)
at async devFetch (file:///Users/mingeon/Algorix/evis-solid/node_modules/solid-start/dev/server.js:111:12)
at async startHandler (file:///Users/mingeon/Algorix/evis-solid/node_modules/solid-start/dev/server.js:134:20)
Internal Server Error (Make sure your app is wrapped in a <Router />)
This error happened inside a server function and you didn't handle it. So the client will receive an Internal Server Error. You can catch the error and throw a ServerError that makes sense for your UI. In production, the user will have no idea what the error is:
Error: Make sure your app is wrapped in a <Router />
at Module.invariant (/Users/mingeon/Algorix/evis-solid/node_modules/@solidjs/router/dist/utils.js:33:15)
at useRouter (/Users/mingeon/Algorix/evis-solid/node_modules/@solidjs/router/dist/routing.js:18:47)
at useRoute (/Users/mingeon/Algorix/evis-solid/node_modules/@solidjs/router/dist/routing.js:21:90)
at Module.useParams (/Users/mingeon/Algorix/evis-solid/node_modules/@solidjs/router/dist/routing.js:54:25)
at Object.$$serverHandler0 (/Users/mingeon/Algorix/evis-solid/src/routes/inquiry/[code].tsx:30:47)
at execute (/Users/mingeon/Algorix/evis-solid/node_modules/solid-start/server/server-functions/server.ts:189:37)
at Object.fn (/Users/mingeon/Algorix/evis-solid/node_modules/solid-start/server/server-functions/server.ts:201:12)
at Module.handleServerRequest (/Users/mingeon/Algorix/evis-solid/node_modules/solid-start/server/server-functions/server.ts:164:34)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async eval (/Users/mingeon/Algorix/evis-solid/node_modules/solid-start/server/middleware.ts:39:30)
at async eval (/Users/mingeon/Algorix/evis-solid/node_modules/solid-start/api/middleware.ts:40:12)
at async eval (/Users/mingeon/Algorix/evis-solid/node_modules/solid-start/entry-server/StartServer.tsx:45:12)
at async devFetch (file:///Users/mingeon/Algorix/evis-solid/node_modules/solid-start/dev/server.js:111:12)
at async startHandler (file:///Users/mingeon/Algorix/evis-solid/node_modules/solid-start/dev/server.js:134:20)
personal_code.tsx(origin)
import { Show } from "solid-js";
import { createRouteAction, redirect } from "solid-start";
export default function PersonalCode() {
const [loading, { Form }] = createRouteAction(async (form: FormData) => {
if (!form.get("personalCode")) {
throw "개인번호를 입력해주세요.";
}
return redirect("/inquiry/" + form.get("personalCode"));
});
return (
<main class="bg-gray-100">
<div class="min-h-screen flex items-center justify-center">
<div class="bg-white rounded-lg p-10 shadow-md">
<h1 class="text-3xl font-bold mb-6">EVIS: 고사장 조회 시스템</h1>
<Form>
<label class="block mb-2">조회용 개인번호</label>
<input name="personalCode" class="block w-full mb-4 p-2 border border-gray-300 rounded" type="text" disabled={loading.pending}/>
<button class="w-full py-3 px-6 text-center font-semibold text-white rounded-lg bg-blue-500" type="submit" disabled={loading.pending}>
조회하기
</button>
<Show when={loading.error}>
<p class="text-red-500 mt-4 text-sm">{loading.error}</p>
</Show>
</Form>
</div>
</div>
</main>
)
}
import { Show } from "solid-js";
import { createRouteAction, redirect } from "solid-start";
export default function PersonalCode() {
const [loading, { Form }] = createRouteAction(async (form: FormData) => {
if (!form.get("personalCode")) {
throw "개인번호를 입력해주세요.";
}
return redirect("/inquiry/" + form.get("personalCode"));
});
return (
<main class="bg-gray-100">
<div class="min-h-screen flex items-center justify-center">
<div class="bg-white rounded-lg p-10 shadow-md">
<h1 class="text-3xl font-bold mb-6">EVIS: 고사장 조회 시스템</h1>
<Form>
<label class="block mb-2">조회용 개인번호</label>
<input name="personalCode" class="block w-full mb-4 p-2 border border-gray-300 rounded" type="text" disabled={loading.pending}/>
<button class="w-full py-3 px-6 text-center font-semibold text-white rounded-lg bg-blue-500" type="submit" disabled={loading.pending}>
조회하기
</button>
<Show when={loading.error}>
<p class="text-red-500 mt-4 text-sm">{loading.error}</p>
</Show>
</Form>
</div>
</div>
</main>
)
}
7 replies