Fix 'Cannot read properties of undefined (reading 'render')' in Vue component

Quick answer

Check your component import: you're likely importing a default export that doesn't exist. Replace import Foo from './Foo.vue' with import Foo from './Foo.vue'; console.log(Foo) — if it logs undefined, the import path is wrong or the component file has no default export.

Why this happens

Vue components have a render function — either written directly in the Options API or generated by the template compiler. When Vue tries to mount a component and calls .render() on undefined, it means the component object itself is null or undefined. This isn't a runtime error in the component's logic; it's a load-time failure. The most common trigger: you moved a component file or renamed it but forgot to update the import — or you're using an async component pattern incorrectly, like defineAsyncComponent(() => import('./Foo.vue')) with a typo in the path. In Vue 3 with <script setup>, if you accidentally have export default {} after the setup block, it can override the generated render. In Vue 2, it's almost always a missing default export — you wrote export const Foo = { ... } instead of export default { ... }.

Fix steps

1. Inspect the import. Open the file where the error occurs (the parent that mounts the broken component). Add a console log right after the import:

   import MyComponent from './components/MyComponent.vue';
   console.log('MyComponent:', MyComponent);

   If MyComponent is undefined, the import path is wrong or the file doesn't exist. Fix the path.
2. Check the component file's export. Open the component file itself (e.g., MyComponent.vue). Ensure it has exactly one default export. In Vue 3 <script setup>, you don't need export default at all — the compiler adds it. If you have both <script setup> and a separate <script> with export default, remove the duplicate. In Vue 2 or Options API, make sure you have export default { name: 'MyComponent', ... } — not export const or module.exports.
3. Remove the component from the template entirely. Temporarily comment out <MyComponent /> in the parent. If the error disappears, you've confirmed the component itself is the problem. Re-add it and proceed to step 4.
4. Try a minimal inline component for testing. Replace the import with a local definition:

   import { h } from 'vue';
   const MyComponent = { render() { return h('div', 'test') } };

   If this works, your component file is corrupted or has syntax errors. Rebuild it from scratch — copy the template and script sections into a new file.
5. Check for circular dependencies. If component A imports B, and B imports A (directly or through a chain), Vue can get a undefined component at mount time. Break the cycle: use defineAsyncComponent for one of the two, or restructure so the dependency is one-way.

Alternative fixes

• For async components: If you're using defineAsyncComponent, the error might come from the loader function itself failing. Wrap the import in a try-catch:

  defineAsyncComponent(() => {
    return new Promise((resolve) => {
      import('./MyComponent.vue').then(resolve).catch(() => resolve({ template: '<div>Error loading</div>' }));
    });
  });

  This won't fix the root cause, but it gives you a fallback UI instead of a crash.
• Vue 2 + Webpack code splitting: If you're using dynamic imports with require.ensure or import() inside components: { Foo: () => import('./Foo.vue') }, the chunk might fail to load. Check the Network tab — if the chunk returns a 404, fix the path.
• TypeScript users: If you have a .vue file with <script lang="ts"> and you're exporting default as an interface or type instead of an object, Vue's runtime will get undefined. Add export default defineComponent({ ... }) to make the type explicit.

Prevention tip

Use a linter rule that catches missing default exports. In ESLint, enable import/default and import/named. It'll flag export const Foo in a .vue file as an error when you try to import it as default. Also, never rename or move component files without using your IDE's refactor feature (F2 in VS Code) — it updates all imports automatically. Manually editing import paths is where 90% of these errors start.