TS9006 error using toRaw/markRaw

[jacobg]

Just bumped Vue from 3.4 to 3.5 plus some other version bumps, and getting this error:

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>

It's in an SFC file and not declaring lang="ts". It uses both toRaw and markRaw. Why is this happening?

[jacobg]

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. But if the vue file only uses <script> and not <script lang="ts">, why would the error occur?

[Hetari]

Sometimes, dependency issues can cause strange type errors. Try reinstalling your node modules:

rm -rf node_modules
npm install

[Wei-Ba]

maybe
tsconfig.app.json

"compilerOptions": {
  // ...
  "allowJs" : true
  // ...
}

[jacobg]

Thanks all.

I tried all these suggestions, and none worked.

Regarding lang="ts" in the vue file, I'm not currently using typescript in the sfc files. In the past, it would just be compiled as javascript, not typescript, without any typescript checks. But now it seems to do typescript checks even without lang="ts" set up on the file. Why is that? Is vue compiling sfc templates to typescript now since 3.5?

allowJs seems to cause more build errors. Not sure why. I used to set in 3.4, but now had to turn it off.

[Hetari]

Can you share the repo link with us or create a simple code in Vue Playground: https://playcode.io/vue so we can see more details and try to figure out the error?

[Wei-Ba]

I found a solution
file tsconfig.app.json and tsconfig.vitest.json
remove composite: true

[jacobg]

Thanks @Hetari .

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.

[Hetari]

Use the Composition API in Vue:

<script setup lang="ts">
import { markRaw, toRaw } from 'vue'

const value1 = markRaw({})
const value2 = toRaw({})
</script>

<template>
  <div>
    <div>Value 1 = {{ value1 }}</div>
    <div>Value 2 = {{ value2 }}</div>
  </div>
</template>

This should be built successfully without errors.

[jacobg]

The problem is I have a very large application that was already working and uses all js and options api. I'm not going to be able to rewrite the whole thing at once in ts with composition api. I guess it seems like a regression from Vue 3.4 to 3.5 that these errors just started occurring.

[Hetari]

I suggest creating a new project with TS

npm create vite@latest

And install all the necessary libraries. You can copy and paste all your existing components (in the Options API) into the new project. If it works, that's great, otherwise you can just switch to the composition API.

[Wei-Ba]

file tsconfig.app.json

"compilerOptions": {
  ...,
  "composite": false, // or delete
  ...
}

or
file *.vue <script>

export default {
  data(){
    return {
      /** @type { {} } */
      value1: markRaw({})
      value2: toRaw({})
    }
  }
}

[edison1105]

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

[jacobg]

Thanks @Wei-Ba It did work fine in the older typescript with it on. It would be nice to know what changed in TypeScript 5.5 to cause this issue.