Skip to content

[Bug]: Vue async component not rendered with code splitting #8017

@pioug

Description

@pioug

Reproduction link or steps

https://stackblitz.com/edit/f1btmose?file=main.vue

<template>
  Icon: <Icon :name="'smile'" :size="22" />
  <br />
  Smile: <Smile :size="22" />
</template>

<script setup>
import Smile from './smile.vue';
import Icon from './icon.vue';
</script>

icon.vueloads lazily smile.vue:

defineAsyncComponent(() => import('./smile.vue'))

What is expected?

The two icon are both rendered.

What is actually happening?

The first icon (static import) is not rendered

Image

Removing the second icon would fix the first one

System Info

(StackBlitz environment)

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    rolldown: ^1.0.0-rc.1 => 1.0.0-rc.1

Any additional comments?

In BandLab, we have a similar setup for icons, and we've been using Rolldown in the staging environment for some time. If I recall correctly, the issue appeared in v1.0.0-beta.59.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions