TypeScript Doesn't work as expected after moving from App.vue to a component.

[ged3v]

Problem: After moving my code from App.vue to a component, the same typescript code started giving the following error:
Vue Version: 3.3.4

[{
	"resource": "/c:/Users/User/Desktop/layers/layers/src/components/global/SideNavigation.vue",
	"owner": "_generated_diagnostic_collection_name_#5",
	"code": "2339",
	"severity": 8,
	"message": "Property 'isDarkMode' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...>, never>; ... 10 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...ar...'.",
	"source": "ts",
	"startLineNumber": 14,
	"startColumn": 27,
	"endLineNumber": 14,
	"endColumn": 37
}]

Expected behavior: It should work without error just like when it was in App.vue file.

<script setup lang="ts">
import { ref, ....other stuff} from 'vue';

const isDarkMode = ref(false);

const toggleDarkMode = () => {
  isDarkMode.value = !isDarkMode.value;
  document.documentElement.classList.toggle('dark', isDarkMode.value);
};
</script>

Related Css:

@media (prefers-color-scheme: dark) {
    .dark {
      background-color: #1a202c;
      color: white;
    }
  }

[LinusBorg]

Is that <script> block part of the SideNavigation.vue component? what does the template look like? Where does this error being thrown exactly?

I feel like I don't get a full picture here.

[ged3v]

Is that <script> block part of the SideNavigation.vue component? what does the template look like? Where does this error being thrown exactly?

I feel like I don't get a full picture here.

Yes, all of that is in the same component (which is called SideNavigation.vue). It was previously in App.vue, but I moved the related code to a component after seeing that it works well.

Only the CSS is not part of the component; it is in a global CSS file, which I use in conjunction with Tailwind. So, App.vue recognizes the object in the global CSS file, but apparently, the component doesn't recognize it. The error is thrown specifically when I create the arrow function.

I verified that I didn't miss any import statements when I moved the code from App.vue to the custom component I created.

const toggleDarkMode = () => {
  isDarkMode.value = !isDarkMode.value;
  document.documentElement.classList.toggle('dark', isDarkMode.value);
};

(By the way, this led me to discover a bug in Volar. Even after removing the function, the error message indicating an issue in this function persists, but it is unrelated to my question in this particular issue.)

So, the idea is that Tailwind detects this class from the main CSS file. When I add a button or any other function, it works because of the class I created and introduced in the Tailwind config file. The only issue is that TypeScript gives me this error when I add this function, which I clearly see has no error in it.

"Property 'isDarkMode' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...>, never>; ... 10 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...ar...'.",

I have tried various alternatives to achieve this task in a different way. The bug in Volar extension may lead me to make a mistake because, as I mentioned, the error message remains unchanged even after removing this specific code. Therefore, when I attempt other approaches, it doesn't help me verify whether it produces an error or not.

The actual code is in my home office computer, I can share more details this evening.

[LinusBorg]

The piece of code that you shared on its own is correct. As you didn't share the template and the missing parts of the script ( those using ...other Stuff, presumably), I can't determine if the left-out parts are responsible.

I also still don't really know where in the code Typescript supposedly sees an error (I presume Volar is showing red squiggly lines in a particular line?). If you made that clear, I missed it.

So I'm not sure how to help you.

And just to be sure, you did restart your editor etc?