From 0f4fa5643f791611bfda56f98cb6bf9a10c5506f Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Sun, 12 Jun 2022 22:22:15 +0100 Subject: [PATCH] fix(nuxt): ignore whitespace and commas within `resolveComponent` (#5428) --- docs/content/2.guide/3.directory-structure/4.components.md | 4 ++++ packages/nuxt/src/components/loader.ts | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/content/2.guide/3.directory-structure/4.components.md b/docs/content/2.guide/3.directory-structure/4.components.md index 6e5300b7f9..7c825a10d9 100644 --- a/docs/content/2.guide/3.directory-structure/4.components.md +++ b/docs/content/2.guide/3.directory-structure/4.components.md @@ -63,6 +63,10 @@ const MyButton = resolveComponent('MyButton') ``` +::alert{type=warning} +If you are using `resolveComponent` to handle dynamic components, make sure not to insert anything but the name of the component, which must be a string and not a variable. +:: + Alternatively, though not recommended, you can register all your components globally, which will create async chunks for all your components and make them available throughout your application. ```diff diff --git a/packages/nuxt/src/components/loader.ts b/packages/nuxt/src/components/loader.ts index b874ff9c26..acda7f7fdc 100644 --- a/packages/nuxt/src/components/loader.ts +++ b/packages/nuxt/src/components/loader.ts @@ -43,7 +43,7 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => { const s = new MagicString(code) // replace `_resolveComponent("...")` to direct import - s.replace(/(?<=[ (])_?resolveComponent\(["'](lazy-|Lazy)?([^'"]*?)["']\)/g, (full, lazy, name) => { + s.replace(/(?<=[ (])_?resolveComponent\(\s*["'](lazy-|Lazy)?([^'"]*?)["'][\s,]*\)/g, (full, lazy, name) => { const component = findComponent(components, name, options.mode) if (component) { const identifier = map.get(component) || `__nuxt_component_${num++}`