Svelte SPA 라우터 - 잘못된 구성 요소 개체 오류

Svelte SPA 라우터 - 잘못된 구성 요소 개체 오류

저는 SvelteKit을 쓰고 있고요.

내 파일 구조는 다음과 같습니다:

src/
├─ assets/
├─ lib/
│  ├─ Navbar.svelte
│  ├─ Sidebar.svelte
├─ routes/
│  ├─ about/
│  │  ├─ index.svelte
│  ├─ contact/
│  │  ├─ index.svelte
│  ├─ products/
│  │  ├─ index.svelte
│  ├─ Test.svelte
│  ├─ index.svelte
│  ├─ __layout.svelte
├─ app.css
├─ app.html

__인스턴스.svelte:

(위 링크의 예를 참조하십시오.)

<script>
  import Router from 'svelte-spa-router'
  import Navbar from "$lib/Navbar.svelte";
  import Sidebar from "$lib/Sidebar.svelte";
  import Home from './index.svelte'
  import About from './about/index.svelte'
  import Contact from './contact/index.svelte'
  import Products from './products/index.svelte'
  import Test from './Test.svelte';

  const routes = {
    // Exact path
    '/': Home,
    '/about': About,
    '/contact': Contact,
    '/products': Products,
    '/test': Test
  }
</script>

<Navbar />

<Sidebar />

<Router {routes} />

<style>
</style>

오류:

Error: Invalid component object
    at new RouteItem (Router.svelte:303:23)
    at Router.svelte:432:28
    at Array.forEach (<anonymous>)
    at Router.svelte:431:31
    at Object.$$render ([Path to project]/node_modules/svelte/internal/index.js:1702:22)
    at eval (/src/routes/__layout.svelte:62:85)
    at Object.$$render ([Path to project]/node_modules/svelte/internal/index.js:1702:22)
    at eval (eval at instantiateModule ([Path to project]/node_modules/vite/dist/node/chunks/dep-fcec4469.js:67775:28), <anonymous>:55:122)
    at $$render ([Path to project]/node_modules/svelte/internal/index.js:1702:22)
    at Object.render ([Path to project]/node_modules/svelte/internal/index.js:1710:26)

콘솔:

제가 제거하고 사용하면 모든 것이 잘 작동합니다.

이 오류에 대해 찾은 것은 (라인)의 소스 코드뿐이었지만 큰 도움이 되지 않았습니다.

예와 같이 구성 요소의 이름을 변경하려고 했지만 오류가 발생했습니다(모두 동일하게 불린다는 사실이 버그일지도 모른다는 생각이 들었습니다...).

에서 수동으로 탐색하면 와 동일한 경로에 있는 외부 경로를 포함하여 오류가 발생합니다. 내가 첫 번째 링크를 제공했기 때문에 후자를 언급한 저자는 다음과 같이 말했다:

라우터를 표시하려면 먼저 Svelte 구성 요소(일반적으로 App.svelte)에서 라우터 구성 요소를 가져옵니다...

일반적으로 제가 본 예를 들어보면, 에 일반적으로 배치된 구조는 에 들어가고 그 다음에 "홈"/"랜딩" 페이지 역할을 하는 에 기본적으로 자동으로 배치됩니다.

참조 -->

내가 시도한 많은 것들이 아마도 그 문제와 아무 상관이 없다는 것을 이해하지만, 그 문제 자체는 나에게 의미가 없다. 예를 들어, 왜 구성요소가 이해하지 못하는 유형의 객체로 전달되는 것일까요? 말 그대로 그 안에만 있어요.

Edit:

Added the following code to my __layout.svelte's <script></script> section:

// Contains logging information used by tests
let logbox = ''
// Handles the "conditionsFailed" event dispatched by the router when a component can't be loaded because one of its pre-condition failed
function conditionsFailed(event) {
  // eslint-disable-next-line no-console
  console.error('Caught event conditionsFailed', event.detail)
  logbox += 'conditionsFailed - ' + JSON.stringify(event.detail) + '\n'
  // Replace the route
  replace('/wild/conditions-failed')
}
// Handles the "routeLoaded" event dispatched by the router after a route has been successfully loaded
function routeLoaded(event) {
  // eslint-disable-next-line no-console
  console.info('Caught event routeLoaded', event.detail)
  logbox += 'routeLoaded - ' + JSON.stringify(event.detail) + '\n'
}
// Handles the "routeLoading" event dispatched by the router whie a route is being loaded
// If the route is dynamically imported, such as with the `import()` syntax, then there might be a delay before the route is loaded
function routeLoading(event) {
  // eslint-disable-next-line no-console
  console.info('Caught event routeLoading', event.detail)
  logbox += 'routeLoading - ' + JSON.stringify(event.detail) + '\n'
}
// Handles event bubbling up from nested routes
function routeEvent(event) {
  // eslint-disable-next-line no-console
  console.info('Caught event routeEvent', event.detail)
  logbox += 'routeEvent - ' + JSON.stringify(event.detail) + '\n'
}

After which I put the following below it, as shown in this test example:

<Router 
  {routes} 
  on:conditionsFailed={conditionsFailed}
  on:routeLoaded={routeLoaded}
  on:routeLoading={routeLoading}
  on:routeEvent={routeEvent}
/>

None of these got called, there was only the red console message seen in the picture above.

Edit 2:

As suggested by Thomas Hennes, I replaced <Router {routes} /> with each component individually in my __layout.svelte file, like so:

<script>
  import Router from 'svelte-spa-router'
  import Navbar from "$lib/Navbar.svelte";
  import Sidebar from "$lib/Sidebar.svelte";
  import Home from './index.svelte'
  import About from './about/index.svelte'
  import Contact from './contact/index.svelte'
  import Products from './products/index.svelte'
  import Test from './Test.svelte';

  const routes = {
    // Exact path
    '/': Home,
    //'/about': About,
    //'/contact': Contact,
    //'/products': Products,
    //'/test': Test
  }
</script>

<Navbar />

<Sidebar />

<Routes {routes} />

<style>
</style>

None of them worked.

Edit 3:

Funny thing, I noticed dynamically importing the routes crashes my local server. xD

const routes = {
  // Exact path
  '/': wrap({
        asyncComponent: () => import('./index.svelte')
  }),
  '/about': wrap({
        asyncComponent: () => import('./about/index.svelte')
  }),
  '/contact': wrap({
        asyncComponent: () => import('./contact/.svelte')
  }),
  '/products': wrap({
        asyncComponent: () => import('./products/.svelte')
  }),
  '/test': wrap({
        asyncComponent: () => import('./Test.svelte')
  }),
}

It doesn't matter which one I import, if I only import one of them or all of them at the same time.

This is the console output of this adventure:

window is not defined
ReferenceError: window is not defined
    at getLocation (Router.svelte:38:31)
    at start (Router.svelte:59:23)
    at Object.subscribe ([Path to project]/node_modules/svelte/store/index.js:51:20)
    at Router.svelte:493:36
    at Object.$$render ([Path to project]/node_modules/svelte/internal/index.js:1702:22)
    at eval (/src/routes/__layout.svelte:112:85)
    at Object.$$render ([Path to project]/node_modules/svelte/internal/index.js:1702:22)
    at eval (eval at instantiateModule ([Path to project]/node_modules/vite/dist/node/chunks/dep-fcec4469.js:67775:28), <anonymous>:55:122)
    at $$render ([Path to project]/node_modules/svelte/internal/index.js:1702:22)
    at Object.render ([Path to project]/node_modules/svelte/internal/index.js:1710:26)
history is not defined
ReferenceError: history is not defined
    at Router.svelte:455:10
    at Object.$$render ([Path to project]/node_modules/svelte/internal/index.js:1702:22)
    at eval (/src/routes/__layout.svelte:112:85)
    at Object.$$render ([Path to project]/node_modules/svelte/internal/index.js:1702:22)
    at eval (eval at instantiateModule ([Path to project]/node_modules/vite/dist/node/chunks/dep-fcec4469.js:67775:28), <anonymous>:55:122)
    at $$render ([Path to project]/node_modules/svelte/internal/index.js:1702:22)
    at Object.render ([Path to project]/node_modules/svelte/internal/index.js:1710:26)
    at render_response (file://[Path to project]/node_modules/@sveltejs/kit/dist/ssr.js:561:28)
    at async respond_with_error (file://[Path to project]/node_modules/@sveltejs/kit/dist/ssr.js:1148:10)
    at async respond$1 (file://[Path to project]/node_modules/@sveltejs/kit/dist/ssr.js:1392:4)
/node_modules/svelte-spa-router/Router.svelte:413
            const match = routesList[i].match(newLoc.location);
                                                     ^

TypeError: Cannot read properties of null (reading 'location')
    at eval (/node_modules/svelte-spa-router/Router.svelte:413:45)
    at Object.subscribe ([Path to project]/node_modules/svelte/store/index.js:53:9)
    at eval (/node_modules/svelte-spa-router/Router.svelte:406:29)
    at Object.$$render ([Path to project]/node_modules/svelte/internal/index.js:1702:22)
    at eval (/src/routes/__layout.svelte:112:85)
    at Object.$$render ([Path to project]/node_modules/svelte/internal/index.js:1702:22)
    at eval (eval at instantiateModule ([Path to project]/node_modules/vite/dist/node/chunks/dep-fcec4469.js:67775:28), <anonymous>:55:122)
    at $$render ([Path to project]/node_modules/svelte/internal/index.js:1702:22)
    at Object.render ([Path to project]/node_modules/svelte/internal/index.js:1710:26)
    at render_response (file://[Path to project]/node_modules/@sveltejs/kit/dist/ssr.js:561:28)

---

svelte-spa-router is designed as a routing solution for Svelte projects (which are client-side only). It is not meant to function in server-side rendered SvelteKit projects.

SvelteKit, which is a universal (CSR + SSR) framework, provides its own routing solution, which will work client-side and server-side.

---

You need to add, in your src/routes/+layout.js file:

export const ssr = false;

I had the same error with current version of SvelteKit and it worked for me.

Page options