Skip to content

Tree shaking/Code splitting is failing with import { type } syntax  #8339

@AlexandreBonaventure

Description

@AlexandreBonaventure

Describe the bug

Hello, we've been noticing an issue with tree-shaking since [email protected]. I tracked the issue down to the esbuild upgrade here: #5861 and even more specifically to this issue evanw/esbuild#1525
The whole issue only happens because we're using "preserveValueImports": true in our json config. It historically helped us get rid of some errors with some types when used in Vue template SFC.
Reading through https://www.typescriptlang.org/tsconfig#preserveValueImports we thought it was a good default (even though it is not set in official create-vite app, but that's another topic).

Anyways, I think repro steps below highlight the issue nonetheless, I thought it was more an esbuild issue at first, but I didn't manage to repro with only esbuild. I believe here that's because rollup is ultimately doing the treeshaking?

Repro

Given a component like

<script setup lang="ts">
import { type Map } from 'mapbox-gl';

let MyMap:Map

(async () => {
  MyMap = new (await import('mapbox-gl')).Map
})();
</script>

With import { type Map } from 'mapbox-gl';` tree shaking fails:
image

With import type { Map } from 'mapbox-gl';` tree shaking succeeds:
image

The expected result is that both syntax should allow code splitting.

Reproduction

https://github.com/AlexandreBonaventure/vite-import-type-bug
(I kept mapbox in the repro since it is easier to spot if code splitting happen)

System Info

not relevant

Used Package Manager

yarn

Logs

No response

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    bug: upstreamBug in a dependency of Vitep3-minor-bugAn edge case that only affects very specific usage (priority)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions