Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
7 tasks done
AlexandreBonaventure opened this issue May 26, 2022 · 4 comments
Closed
7 tasks done
Labels
bug: upstream Bug in a dependency of Vite p3-minor-bug An edge case that only affects very specific usage (priority)

Comments

@AlexandreBonaventure
Copy link
Contributor

AlexandreBonaventure commented May 26, 2022

Describe the bug

Hello, we've been noticing an issue with tree-shaking since vite@2.8.0. 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

@AlexandreBonaventure AlexandreBonaventure changed the title Tree shaking is failing with import { type } syntax Tree shaking/Code splitting is failing with import { type } syntax May 26, 2022
@sapphi-red
Copy link
Member

I was able to reproduce only with esbuild.
For example, think about this code.

import { type Map } from 'mapbox-gl';

let MyMap:Map

When preserveValueImports is true, it becomes:

import {} from "mapbox-gl";
let MyMap;

"preserveValueImports":true (esbuild repl) "preserveValueImports":true (ts playground)

When preserveValueImports is false, it becomes:

let MyMap;

"preserveValueImports":false (esbuild repl) "preserveValueImports":false (ts playground)

It seems to be a bug in esbuild because the behavior differs from TypeScript compiler.
I thought a bit strange about the TS compiler's behavior at first, but it seems intended.

@sapphi-red sapphi-red added bug: upstream Bug in a dependency of Vite p3-minor-bug An edge case that only affects very specific usage (priority) and removed pending triage labels May 26, 2022
@AlexandreBonaventure
Copy link
Contributor Author

Oh nice thanks ! I probably was not able to reproduce because I was using the bundle api rather than the transform.
It's fine if I share your findings in the esbuild repo ? Or you prefer to create a ticket yourself ?

@sapphi-red
Copy link
Member

Feel free to create an issue with my findings. 👍

@AlexandreBonaventure
Copy link
Contributor Author

Closing because it is an upstream bug

@github-actions github-actions bot locked and limited conversation to collaborators Jun 10, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug: upstream Bug in a dependency of Vite p3-minor-bug An edge case that only affects very specific usage (priority)
Projects
None yet
Development

No branches or pull requests

2 participants