External library components break in rollup build (Vue3)

[tamasfe]

Describe the bug

Components imported from an external library stop working correctly after the final bundle is produced, even though vite dev loads them correctly.

I created a library package according to the docs, and used an exported component in an another application.

Things seem to disappear or simply stop working, namely templates/fragments and slots.

Nodes either just don't render, or errors like node is null are thrown. The latter happens with slots, but I don't have a MWE for that.

Reproduction

I created an example repo here.

steps:

• from testlib
  • yarn
  • yarn build
  • yarn link if needed
• from testapp
  • yarn link testlib if needed
  • yarn
  • yarn dev
  • observe the correct result
  • yarn build && yarn serve
  • observe the void

System Info

System:
    OS: Linux 5.12 openSUSE Tumbleweed 20210623
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 5.71 GB / 31.29 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.17.1 - ~/.nvm/versions/node/v14.17.1/bin/node
    Yarn: 1.22.10 - /bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.1/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Chromium: 91.0.4472.114
    Firefox: 89.0

Used Package Manager

yarn

Logs

from `testapp`:

vue-tsc --noEmit && vite build --debug
  vite:config bundled config file loaded in 66ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'vite:dynamic-import-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:vue',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'vite:import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter'
  vite:config   ],
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillDynamicImport: false,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null
  vite:config   },
  vite:config   define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
  vite:config   ssr: { external: [ 'vue', '@vue/server-renderer' ] },
  vite:config   configFile: '/home/tamasfe/work/personal/vuetest/testapp/vite.config.ts',
  vite:config   configFileDependencies: [ 'vite.config.ts' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: {}
  vite:config   },
  vite:config   root: '/home/tamasfe/work/personal/vuetest/testapp',
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object] ] },
  vite:config   publicDir: '/home/tamasfe/work/personal/vuetest/testapp/public',
  vite:config   cacheDir: '/home/tamasfe/work/personal/vuetest/testapp/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isProduction: true,
  vite:config   server: {
  vite:config     fsServe: {
  vite:config       root: '/home/tamasfe/work/personal/vuetest/testapp',
  vite:config       strict: false
  vite:config     }
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: { esbuildOptions: { keepNames: undefined } }
  vite:config } +23ms
vite v2.3.8 building for production...
✓ 15 modules transformed.
dist/index.html                  0.42kb
dist/assets/index.2f16e9a8.js    0.65kb / brotli: 0.33kb
dist/assets/vendor.91484aa8.js   55.57kb / brotli: 17.54kb
Done in 6.39s.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[tamasfe]

I've added the "dist" directories so that you don't have to build the repo.

After a closer look, the Vue library seems to get duplicated in the final output vendor chunk. Both the imported component and the app's component use their own Vue functions and they don't seem to be aware of eachother (output).

[tamasfe]

Alright, the problem seems to be the use of npm link.

I strumbled upon this so thread, then this comment.

While this doesn't specifically appear to be a Vite issue, it might be worth documenting somewhere to avoid hard-to-debug surprises.
A warning here in the docs should be enough, while Vite handles links just fine, rollup doesn't.

[Shinigami92]

@tamasfe Please feel free to create a PR to update the docs

vite/docs/guide/dep-pre-bundling.md

Line 37 in d377aae

## Monorepos and Linked Dependencies