sveltejs / kit

web development, streamlined
https://svelte.dev/docs/kit
MIT License
18.71k stars 1.94k forks source link

"+error.svelte" can't be inserted in a slot in a specific layout in a specific route, seems to be root layout only #6667

Closed IvankoB closed 2 years ago

IvankoB commented 2 years ago

Describe the bug

Trying to workaround it with "(..)" grouping and naming file as "+error@.svelte" is rejected.

The directory structure after aplying advices from https://github.com/sveltejs/kit/discussions/6531

routes/
│   +error.svelte
│   +layout.svelte
│   +page.svelte
│
└───home
    │   +layout.svelte
    │   +page.svelte
    │   -page.server.js
    │
    └───[...catchall]
            +error.svelte

While navgating to non-existent 'routes/home/badgy', the desired 'routes/home/[...catchall]/+error.svelte' is ignored and 'routes/+error.svelte' is displayed instead inserted in the root 'routes/+layout.svelte'. Though 'routes/home/[...catchall]/+page.svelte' is inserted in 'routes/home/+layout.svelte' as expected. This way this page can be used instead of error page but it looks like an workaround (has httpStatus =200 instead of expected 404 etc )

Reproduction

Any project with non-root route and layout.

Logs

error when starting dev server:
Error: Files prefixed with + are reserved (saw src/routes/home/(home)/+error@home.svelte)

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
    Memory: 1.22 GB / 11.90 GB
  Binaries:
    Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.1 - D:\MyProjects\JS\node_modules\.bin\npm.CMD
  Browsers:
    Chrome: 104.0.5112.102
    Edge: Spartan (44.22000.120.0), Chromium (105.0.1343.27)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.71
    @sveltejs/adapter-node: ^1.0.0-next.88 => 1.0.0-next.88
    @sveltejs/kit: next => 1.0.0-next.477
    svelte: ^3.44.0 => 3.50.0
    vite: ^3.1.0 => 3.1.0

Severity

serious, but I can work around it

Additional Information

No response

IvankoB commented 2 years ago
routes/
│   +error.svelte
│   +layout.svelte
│   +page.svelte
│
└───home
    │   +error.svelte
    │   +layout.svelte
    │   +page.svelte
    │
    └───[...404]
            +page.server.js

with '[...404]/+page.server.js' :

import { error } from '@sveltejs/kit';

/** @type {import('../../../.svelte-kit/types/src/routes/home/$types').PageServerLoad} */
export async function load({ params}) {
    throw error(404,'No such page');   
}

works (shows '/home/+error.svelte' in '/home/+layout.svelte' in '+layout.svelte') but looks hacky.

Conduitry commented 2 years ago

Using https://kit.svelte.dev/docs/load#errors in a +page.js load is the intended way to do this.