vite Internal server error: Codegen node is missing for element/if/for node. Apply appropriate transforms first

Question

so yesterday i was working on a project and by the time i was about to quit because i was done with it i got this error and have been trying to fix it the entire day today. My code worked, then broke, undid everything to a point where i knew it worked, but it was still broken.

The error i get in my 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 main.js line 5 there is only an import for App. i have not touched main.js, App.vue and AppTemplate.vue since the beginning of the project sinse i did not have to.

To run my code i use run vite in the terminal (or in my case a shortcut for the run window in phpstorm) there 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 could find or think of,

beginning with restarting vite, restarting docker container, restarting my laptop, like i said before, revert to a working version but still broken. updating terminal dev tools and a few things git was complaining about. check for wrong placed tags. (none were wrongplaced)

i have no clue what to do anymore and any and all suggestions are very much welcome. Any info requested i will do my best to share soon.

I have a macbook pro 2020 use Vue 3 with Vite a few library's i use are: vue-class-components axios vue-router vueX

Pyrrhuloxia

this is not a "question", you should reword the title to increase the likelihood of getting a response. – Rosamondrosamund

This question isn't really answerable without a minimal reproducible example of the code or environment causing the problem. – Wood

Answer 1

So i figured it out, well, my boss of design did, all i had to do was delete the node_modules directory and run npm install to reinstall the directory. this fixed it for me. hope it does for others to.

Pyrrhuloxia

I had this weird bug when i tried to wrap the slot content that is passed to tippy-js component inside a single div element using vue – Schertz

This answer doesn't get to the root of the problem – Rosamondrosamund

Answer 2

Very late but just in case anyone else has the same issue.

This also happens when trying to use a named slot without using a default slot, or trying to use a single named slot instead of using the default one. Apparently, that is not possible.

If you have a single slot in your component, it cannot be a named slot but just <slot></slot> and also remove the <template #slot-name> tag from the parent, or nothing will show.

If you have more slots, you have to name them but make sure to declare the default one.

Vue CLI never complained, but after switching to Vite the error started to appear.

Concision

Answer 3

Had this obscure error too with this template:

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

Which was missing my NavBar component and should have been:

<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 a template in a template obviously wouldn't work.

Am also developing in Docker, but it doesn't seem relevant in this case.

Cytaster

Answer 4

In my case I had a template tag with a named slot but the template tag was not inside of a component. It was just hanging out in the parent SFC doing nothing.

ParentComponent.Vue


<template #content>
    <p>Some Content</p>
    <SomeComponent></SomeComponent>
</template>

I diagnosed the issue by commenting out code in chunks and adding it back until I found the section that was causing the build error.

Abib

Answer 5

If you are propagating among the slots from parent to child. I tried modifying the slot in parent to be - for eg.

<template slot="trigger">
<slot name="trigger" v-bind="{ show }"></slot>
</template>

Before it was -

<template #trigger>
<slot name="trigger" v-bind="{ show }"></slot>
</template>

Gigantopithecus

Answer 6

Encountered this with 2 scenarios today:

#1 I modified a base component with scoped properties to use named slots, and forgot to move the v-slot tag to the new named slot:

// Base Component
<template>
  <div>
    Hello I am the BaseComponent
    <slot :someMethod="..."></slot>
  </div>
</template>

// Using the Base Component - Correct Usage
<BaseComponent v-slot="{someMethod}">
  <AnotherComponent></AnotherComponent>
</BaseComponent>

// But with even a single named slot, this will fail
<BaseComponent v-slot="{someMethod}">
  <slot #myNamedSlot>
    <AnotherComponent></AnotherComponent>
  </slot>
</BaseComponent>

// This is Correct.
<BaseComponent>
  <slot #myNamedSlot v-slot="{someMethod}">
    <AnotherComponent></AnotherComponent>
  </slot>
</BaseComponent>

#2 - Nested named slots. Silly mistake but difficult to spot on large components.

// Base Component with 2 named slots
<template>
  <div>
    Hello I am the BaseComponent
    <slot name='slot1' :someMethod="..."></slot>
    <slot name='slot2' :someMethod="..."></slot>
  </div>
</template>

// Incorrect Usage.
<BaseComponent>
  <slot #slot1 v-slot="{someMethod}">
    <AnotherComponent></AnotherComponent>
    <slot #slot2 v-slot="{someMethod}">
      <AnotherComponent></AnotherComponent>
    </slot>
  </slot>
</BaseComponent>

// Correct Usage
<BaseComponent>
  <slot #slot1 v-slot="{someMethod}">
    <AnotherComponent></AnotherComponent>
  </slot>
  <slot #slot2 v-slot="{someMethod}">
    <AnotherComponent></AnotherComponent>
  </slot>
</BaseComponent>

Deluge