When using preserveModules = true, the rollup output can't be consumed with sideEffects: false in package.json

[07akioni]

Version

5.0.0

Reproduction link

https://repl.it/join/czprwdpz-07akioni

Steps to reproduce

run main.sh

What is expected?

The app output should contains render function

What is actually happening?

Only the options is preserved

---

preserveModules = true is important for library development. However every single vue file is split into 3 files in that mode.

.vue =>
vue-template
vue-options (default export)
set-render-on-options

import default from 'xxx.vue'
// is converted to
import default from 'xxx-vue-options'
import 'set-render-on-options' // which has side effects

// I think the behavior is wired and may have some unexpected effects when tree-shaking

When I use the built library (if it is set to sideEffects: false)

import { Button } from 'my-library'

// use Button

Only the options of the Button will be bundled.

Is there any possibility to create only one file for a .vue sfc in preserveModules = true mode? That will not create unexpected side effects.

---

For example

export { default as Button } from './button/index'
export { default as Text } from './text/index'
export { default as Space } from './switch/index'

Is build as

export { default as Text } from './text/Text.vue_vue&type=script&lang.js';
import './text/Text.vue.js';
export { default as Button } from './button/Button.vue_vue&type=script&lang.js';
import './button/Button.vue.js';
export { default as Space } from './switch/Switch.vue_vue&type=script&lang.js';
import './switch/Switch.vue.js';

Which is not friendly for tree-shaking. For a component library, the codebase may be huge. If you don't set sideEffects: false, you will find it very hard to find out which part breaks tree-shaking. However if you set sideEffects: false, every xxx.vue.js will be pruned since it is not directly imported and viewed as tree-shakable.

[Olivierko]

@07akioni Did you ever find a workaround for this problem?

[07akioni]

@07akioni Did you ever find a workaround for this problem?

I create a tool in for my scene that transfers a vue file to ts file. https://github.com/07akioni/v2s

I don't promise the tool is solid. It's only used in my personal project like https://github.com/07akioni/xicons

Then I can use tsc instead of rollup and vue plugin.

Also I uses tsx to build vue component instead of sfc.

[Olivierko]

@07akioni

Thanks for sharing.

It's unfortunate that there's no concrete example on how to deal with this anywhere, so far I've only found work-arounds that either exclude sfc's entirely or depend on a two step build through scripting.

Nearly a year without a commit in this repository now...