Cannot access ambient const enums when the '--isolatedModules' flag is provided.

[francoislevesque]

Describe the bug

Even with a minimal setup, vue-tsc fire errors when isolatedModules flag is active

Reproduction

https://github.com/francoislevesque/vite-issue

What I did

Very simple:

npm init vite@latest
# select vue + vue-ts
npm i

Set isolatedModules to true in tsconfig.json.

npm run build

Get the following errors:

node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1193:6 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.

1193     [BooleanFlags.shouldCast]?: boolean;
          ~~~~~~~~~~~~

node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1194:6 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.

1194     [BooleanFlags.shouldCastTrue]?: boolean;
          ~~~~~~~~~~~~

node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1730:10 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.

1730 export { TrackOpTypes }
              ~~~~~~~~~~~~

node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1759:10 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.

1759 export { TriggerOpTypes }
              ~~~~~~~~~~~~~~

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 4.64 GB / 15.74 GB
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 96.0.4664.45
    Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.29)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    @vitejs/plugin-vue: ^1.9.3 => 1.10.0
    vite: ^2.6.4 => 2.6.14

Used Package Manager

npm

Logs

> vite-issue@0.0.0 build
> vue-tsc --noEmit && vite build

node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1193:6 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.

1193     [BooleanFlags.shouldCast]?: boolean;
          ~~~~~~~~~~~~

node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1194:6 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.

1194     [BooleanFlags.shouldCastTrue]?: boolean;
          ~~~~~~~~~~~~

node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1730:10 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.

1730 export { TrackOpTypes }
              ~~~~~~~~~~~~

node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1759:10 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.

1759 export { TriggerOpTypes }
              ~~~~~~~~~~~~~~


Found 4 errors.

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.
• The provided reproduction is a minimal reproducible example of the bug.

[coderhzy]

I also encountered the same problem

[theoephraim]

I recently reread the vite docs to make sure I was up to date and updated my tsconfig accordingly (see https://vitejs.dev/guide/features.html#typescript-compiler-options) and am seeing this as well.

Just adding this note so in case docs need to be updated one way or another...

[laoshaw]

similar issues here, for now I just turn isolatedModules to false to avoid them

[JarodXP]

Exactly the same problem

[rehanvdm]

Same problem, followed the docs and it breaks the application

[rehanvdm]

Okay so it looks like this is happening because vue-tsc is using tsc under the hood and it will also check the types of all packages used in the node_modules directory. The vue project has been transpiled with different options than what the Vite docs specify/want. So add the "skipLibCheck": true flag to your tsconfig.json, it will then ignore all other modules and only check the code you write (not in node modules).

https://www.typescriptlang.org/tsconfig#skipLibCheck

Is it safe to turn it off?
https://stackoverflow.com/questions/52311779/usage-of-the-typescript-compiler-argument-skiplibcheck
The accepted answer:

To paraphrase the question tersely:

Surely [enabling skipLibCheck] decreases the integrity of the typing of your application?

I would agree that yes, it does. However, if the alternative is an application that does not compile, then it becomes a handy flag.

While Typescript itself is fairly mature, the typescript community is still relatively young. There are type definitions available for tons of libraries, and even some native typescript libraries, but they can be incompatible with one another for a variety of reasons.

You may import a library whose typing is built with a less-strict tsconfig than you would like--which your compiler could complain about when you try to use it.

You could find two libraries define the same types, but incompatibly. I've imported some libraries that supplied their own typings for a Polyfill of Buffer, and my whole application would fail to compile because of their incompatibility.

Enabling --skipLibCheck can help work around these issues. Turning it on will prevent Typescript from type-checking the entire imported libraries. Instead, Typescript will only type-check the code you use against these types. This means that as long as you aren't using the incompatible parts of imported libraries, they'll compile just fine.

tl;dr, Yes, --skipLibCheck degrades type checking, and ideally we wouldn't use it. But not every library provides perfect types yet, so skipping it can be nice.

[mitar]

I have few days ago created a project using npm create vite@latest, selecting vue + vue-ts and it does not set isolatedModules to true in tsconfig.json. So I wonder, is it really necessary to set isolatedModules? I mean, why does vite template does not set it already? I know that it is in documentation that one should set it. But I wonder why this confusion?

I am also asking because in VScode a simple component like:

<script setup lang="ts">
const props = defineProps({
  id: String
})
</script>

<template>
  <p>document {{id}}</p>
</template>

Shows an error with isolatedModules set to true, that it cannot be compiled because it is consider a global script (no imports or exports). Removing isolatedModules make things work.

[sapphi-red]

It's a issue with vue vuejs/core#1228.