Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-25 15:15:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(nuxt): fix lazy import of .client components (#7422)

Browse Source 
Co-authored-by: Daniel Roe <daniel@roe.dev>
This commit is contained in:
Julien Huang 2022-10-03 16:14:07 +02:00 committed by GitHub
parent 5b8499cdba
commit 2c8c21209b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/nuxt/src/components/loader.ts
View File

@ -71,20 +71,25 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => {
let identifier = map.get(component) || `__nuxt_component_${num++}` let identifier = map.get(component) || `__nuxt_component_${num++}`
map.set(component, identifier) map.set(component, identifier)
if (lazy) {
imports.add(genImport('vue', [{ name: 'defineAsyncComponent', as: '__defineAsyncComponent' }]))
identifier += '_lazy'
imports.add(`const ${identifier} = /*#__PURE__*/ __defineAsyncComponent(${genDynamicImport(component.filePath, { interopDefault: true })})`)
} else {
imports.add(genImport(component.filePath, [{ name: component.export, as: identifier }]))
}
const isClientOnly = component.mode === 'client' const isClientOnly = component.mode === 'client'
if (isClientOnly) { if (isClientOnly) {
imports.add(genImport('#app/components/client-only', [{ name: 'createClientOnly' }])) imports.add(genImport('#app/components/client-only', [{ name: 'createClientOnly' }]))
imports.add(`const ${identifier}_client = /*#__PURE__*/ createClientOnly(${identifier})`)
identifier += '_client' identifier += '_client'
} }
if (lazy) {
imports.add(genImport('vue', [{ name: 'defineAsyncComponent', as: '__defineAsyncComponent' }]))
identifier += '_lazy'
imports.add(`const ${identifier} = /*#__PURE__*/ __defineAsyncComponent(${genDynamicImport(component.filePath, { interopDefault: true })}${isClientOnly ? '.then(c => createClientOnly(c))' : ''})`)
} else {
imports.add(genImport(component.filePath, [{ name: component.export, as: identifier }]))
if (isClientOnly) {
imports.add(`const ${identifier}_wrapped = /*#__PURE__*/ createClientOnly(${identifier})`)
identifier += '_wrapped'
}
}
return identifier return identifier
} }
// no matched // no matched