sfc without typescript is failing type check

[jacobg]

Vue version

3.5.12

Link to minimal reproduction

https://github.com/jacobg/vue-project-ts

Steps to reproduce

Since updating Vue 3.4 to 3.5, I'm seeing build errors like this:

src/components/MyComponent.vue:1:1 - error TS9006: Declaration emit for this file requires using private name 'RawSymbol' from module '"/Users/j/repositories/f/console/node_modules/@vue/reactivity/dist/reactivity"'. An explicit type annotation may unblock declaration emit.

<template>

That particular component uses markRaw and toRaw.

But the vue sfc file only uses <script> and not <script lang="ts">, so such an error is not expected.

In the tsconfig.app.json file if:

 "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],

is changed to:

"include": ["env.d.ts", "src/**/*.ts"],

then the errors goes away.

What is expected?

No build error

What is actually happening?

Error TS9006

System Info

No response

Any additional comments?

No response

[edison1105]

Please follow the issue requirement and provide a minimal runnable reproduction

[jacobg]

The error doesn't come up when running npm run dev, only npm run build. Isn't that what a sandbox repro would do?

Should I create a github repo for it, or upload a zip file?

[jacobg]

@edison1105

Here is a repo link that reproduces it:
https://github.com/jacobg/vue-project-ts

Note that HelloWorld.vue is a non-typescript sfc.

If you clone, and run:

npm i
npm run build

These errors should occur:

src/components/HelloWorld.vue:1:1 - error TS9006: Declaration emit for this file requires using private name 'RawSymbol' from module '"/Users/jacob/repositories/vue-project-ts/node_modules/@vue/reactivity/dist/reactivity"'. An explicit type annotation may unblock declaration emit.

src/components/HelloWorld.vue:1:1 - error TS9006: Declaration emit for this file requires using private name 'RawSymbol' from module '"/Users/jacob/repositories/vue-project-ts/node_modules/@vue/reactivity/dist/reactivity"'. An explicit type annotation may unblock declaration emit.

Should I open a new issue, or do you want to re-open this one?

[edison1105]

a workaround

// util.ts
import { markRaw as _markRaw } from 'vue'
export const markRaw = (obj: any) => _markRaw(obj)

// comp.vue
import { markRaw } from './utils'
import { toRaw } from 'vue';
export default {
  data() {
    return {
      value1: markRaw({}),
      value2: toRaw({}),
    }
  },
}

[jacobg]

Thanks @edison1105 .

Your workaround does indeed seem fix that error.

It does seem though that the error wasn't caused by something about markRaw changing when updating from Vue 3.4 to 3.5, because I'm also getting a couple other errors when building non-typescript sfc's as follows:

src/components/ChartBar.vue:1:1 - error TS9006: Declaration emit for this file requires using private name 'ExtendedDataPoint' from module '"/Users/j/repositories/fareclock/console/node_modules/vue-chartjs/dist/typedCharts"'. An explicit type annotation may unblock declaration emit.

src/components/DateTimePicker.vue:1:1 - error TS9006: Declaration emit for this file requires using private name 'Slots' from module '"/Users/j/repositories/f/console/node_modules/@vuepic/vue-datepicker/index"'. An explicit type annotation may unblock declaration emit.

The referenced node modules have not changed since updating to Vue 3.5.

I tried excluding those sfc files in tsconfig.app.json, but that had no effect for some reason, not sure why.

Are you able to pinpoint exactly why these errors are only occurring since updating to Vue 3.5? What would you say is the resolution of this issue for all 3 errors?

[edison1105]

This might be a TypeScript issue. using "typescript": "~5.5.4" does not throw an error.