From f6bf4f75591e523aabc5ad98952a7118ddf77ca5 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Fri, 10 Jun 2022 14:35:58 +0100 Subject: [PATCH] fix(nuxt): throw an error when using unknown route middleware (#5323) --- docs/content/2.guide/3.directory-structure/6.layouts.md | 2 +- docs/content/2.guide/3.directory-structure/7.middleware.md | 2 +- packages/nuxt/src/pages/runtime/router.ts | 7 +++++-- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/docs/content/2.guide/3.directory-structure/6.layouts.md b/docs/content/2.guide/3.directory-structure/6.layouts.md index 0f7c800259..f1e393f185 100644 --- a/docs/content/2.guide/3.directory-structure/6.layouts.md +++ b/docs/content/2.guide/3.directory-structure/6.layouts.md @@ -8,7 +8,7 @@ head.title: Layouts directory Nuxt provides a customizable layouts framework you can use throughout your application, ideal for extracting common UI or code patterns into reusable layout components. -Layouts are placed in the `layouts/` directory and will be automatically loaded via asynchronous import when used. Layouts are used by setting a `layout` property as part of your page metadata (if you are using the `~/pages` integration), or by using the `` component. +Layouts are placed in the `layouts/` directory and will be automatically loaded via asynchronous import when used. Layouts are used by setting a `layout` property as part of your page metadata (if you are using the `~/pages` integration), or by using the `` component. (**Note**: The layout name is normalized to kebab-case, so `someLayout` becomes `some-layout`.) If you only have a single layout in your application, we recommend using [app.vue](/guide/directory-structure/app) instead. diff --git a/docs/content/2.guide/3.directory-structure/7.middleware.md b/docs/content/2.guide/3.directory-structure/7.middleware.md index 25bb8a2347..12d36c6e05 100644 --- a/docs/content/2.guide/3.directory-structure/7.middleware.md +++ b/docs/content/2.guide/3.directory-structure/7.middleware.md @@ -15,7 +15,7 @@ Route middleware run within the Vue part of your Nuxt app. Despite the similar n There are three kinds of route middleware: 1. Anonymous (or inline) route middleware, which are defined directly in the pages where they are used. -2. Named route middleware, which are placed in the `middleware/` directory and will be automatically loaded via asynchronous import when used on a page. +2. Named route middleware, which are placed in the `middleware/` directory and will be automatically loaded via asynchronous import when used on a page. (**Note**: The route middleware name is normalized to kebab-case, so `someMiddleware` becomes `some-middleware`.) 3. Global route middleware, which are placed in the `middleware/` directory (with a `.global` suffix) and will be automatically run on every route change. The first two kinds of route middleware can be [defined in `definePageMeta`](/guide/directory-structure/pages). diff --git a/packages/nuxt/src/pages/runtime/router.ts b/packages/nuxt/src/pages/runtime/router.ts index f5d00f192d..824dddeeae 100644 --- a/packages/nuxt/src/pages/runtime/router.ts +++ b/packages/nuxt/src/pages/runtime/router.ts @@ -141,8 +141,11 @@ export default defineNuxtPlugin(async (nuxtApp) => { for (const entry of middlewareEntries) { const middleware = typeof entry === 'string' ? nuxtApp._middleware.named[entry] || await namedMiddleware[entry]?.().then(r => r.default || r) : entry - if (process.dev && !middleware) { - console.warn(`Unknown middleware: ${entry}. Valid options are ${Object.keys(namedMiddleware).join(', ')}.`) + if (!middleware) { + if (process.dev) { + throw new Error(`Unknown route middleware: '${entry}'. Valid middleware: ${Object.keys(namedMiddleware).map(mw => `'${mw}'`).join(', ')}.`) + } + throw new Error(`Unknown route middleware: '${entry}'.`) } const result = await callWithNuxt(nuxtApp, middleware, [to, from])