Please apply the appropriate transformation first to resolve vite Internal Server Error: Missing code generation node for element /if/for node

Question

So yesterday I was working on a project and as I was getting ready to quit because I was done with it, I got this error and have been trying to fix it all day today. My code works, and then it breaks, undoing everything to the point where I know it works, but it's still broken.

The error I receive in browserConsole is: GET http://localhost:8080/src/js/component/App.vue net::ERR_ABORTED 500 (Internal Server Error) (main.js:5)

When I look at line 5 of main.js, there are only imports for App. I haven't touched main.js, App.vue, and AppTemplate.vue since the beginning of the project because I didn't have to.

To run my code I use run vite in the terminal (or in my case the run window shortcut in phpstorm) and I get another error:

Cannot read properties of undefined (reading 'type')
Cannot read properties of undefined (reading 'type') (x2)
Cannot read properties of undefined (reading 'type') (x3)
Cannot read properties of undefined (reading 'type') (x4)
Cannot read properties of undefined (reading 'type') (x5)
Cannot read properties of undefined (reading 'type') (x6)
Cannot read properties of undefined (reading 'type') (x7)
Cannot read properties of undefined (reading 'type') (x8)
Cannot read properties of undefined (reading 'type') (x9)
Cannot read properties of undefined (reading 'type') (x10)
1:40:13 PM [vite] Internal server error: Codegen node is missing for element/if/for node. Apply appropriate transforms first.
  Plugin: vite:vue
  File: /Users/robdewilligen/Development/Wittig/jobse/app/src/js/component/App.vue
      at assert (/Users/robdewilligen/Development/Wittig/jobse/app/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:508:15)
      at genNode (/Users/robdewilligen/Development/Wittig/jobse/app/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2628:13)
      at genNodeList (/Users/robdewilligen/Development/Wittig/jobse/app/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2602:13)
      at genNodeListAsArray (/Users/robdewilligen/Development/Wittig/jobse/app/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2587:5)
      at genNodeList (/Users/robdewilligen/Development/Wittig/jobse/app/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2599:13)
      at genVNodeCall (/Users/robdewilligen/Development/Wittig/jobse/app/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2770:5)
      at genNode (/Users/robdewilligen/Development/Wittig/jobse/app/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2651:13)
      at generate (/Users/robdewilligen/Development/Wittig/jobse/app/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2412:9)
      at Object.baseCompile (/Users/robdewilligen/Development/Wittig/jobse/app/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:5690:12)
      at Object.compile (/Users/robdewilligen/Development/Wittig/jobse/app/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.js:3100:25) ```

this bit repeats another 6 or 7 times or so:
``` Cannot read properties of undefined (reading 'type')
Cannot read properties of undefined (reading 'type') (x2)
Cannot read properties of undefined (reading 'type') (x3)
Cannot read properties of undefined (reading 'type') (x4)
Cannot read properties of undefined (reading 'type') (x5)
Codegen node is missing for element/if/for node. Apply appropriate transforms first.
Codegen node is missing for element/if/for node. Apply appropriate transforms first. (x2)

So far I have tried anything I can find or think of,

Start by restarting vite, Restart the docker container, restarted my laptop, Like I said before, reverted to a working version but still corrupted. Updated terminal development tools and some things git was complaining about. Check whether the label is placed incorrectly. (Not misplaced)

I'm at a loss for what to do, any and all suggestions are very welcome. Any requested information I will try to share as quickly as possible.

I have a MacBook Pro 2020 Using Vue 3 with Vite Some libraries I use are: vue class component axis vue-router vueX

Answer 1

This obscure error also occurs in this template:

<template>
    <AppShell>
        <template v-slot:header>
            <template v-slot:home>Home</template>
            <RouterLink to="/media">Media</RouterLink>
        </template>
    </AppShell>
</template>

My NavBar component is missing, instead it should be:

<template>
    <AppShell>
        <template v-slot:header>
            <NavBar>
                <template v-slot:home>Home</template>
                <RouterLink to="/media">Media</RouterLink>
            </NavBar>
        </template>
    </AppShell>
</template>

Trying to put the template into the template obviously doesn't work.

I also develop in Docker, but it doesn't seem relevant in this case.

Answer 2

So I figured out, okay, my design boss did it, all I had to do was delete the node_modules directory and run npm install to reinstall the directory. This solved it for me. Hopefully it will be the same for others.