Issues loading Vue defineComponent()s in Nuxt | Could not load vue.esm-bundler\server-renderer

Question

Hello All and Thank You,

I am currently still trying to pin down the issue. I am also new to Nuxt, semi-new to Vue.

So I just spent the past year on and off building out a prototype concept player. I am now ready to build out the remaining platform. I just transferred my prototype Vue components built for a LAMP stack to Nuxt.

Currently they are in the components directory imported without auto-import to a Nuxt layout SFC file. My prototype components are built in .ts files with the defineComponent() Vue component creation which worked fine thus far (I will convert them to SFC files in the future, I just want my components to render).

The following is a simple layout code to show how a Vue component is defined in a .ts file without SFC if you are not familiar and it is also my main entry file into my Player:

import {defineComponent, onMounted, ref, shallowReactive} from 'vue';
import {Ref} from '@vue/reactivity';
import {Controls} from "./components/controls";
// ... <more imports>

export const XPlayer = defineComponent({
    template:`
      <div class="x-player" style="height: 100vh">

      <div class="main-window">
        // ...
      </div>

      <div class="player-bottom">
        <Timeline :player-state="playerState" :currentTime="currentTime" :duration="duration" v-if="showTimeline"/>
        <Controls :player-state="playerState" :currentTime="currentTime" :duration="duration" v-if="showControls"/>
      </div>

      <Modal ref="modal"/>
      
      </div>
    `,
    props: {
    },
    setup(props) {

        // ... <example ref creation>
        const playerState = shallowReactive<PlayerState | {[key:string]: any}>({
            playerController: null,
            timelineMarkerController: null,
            bookmarkController: null,
        });

        // ... <other code>

        onMounted(() => {
            // ... <some code>
        })

        return {
            playerState,
            // ... <other refs/reactives returned>
        };
    },
    components: {
        "Controls": Controls,
        // ... <other components>
    }
});

// Some other classes
export class XPlayerStateChecker {
  //...
}

In Nuxt layout component (just for testing) I am only displaying on client since it is a dynamic Player which gets rendered on client, I also get the following error if I don't wrap it in which is okay, I want to use it in ClientOnly anyway:

<template>
  <div :class="{'dark': darkMode}">
    <div class="min-h-[100vh] bg-zinc-50 dark:bg-zinc-950" >
      // ... <some other elements>

      <ClientOnly fallback-tag="span" fallback="loading player..." >
        <XPlayer/>
      </ClientOnly>
      
    </div>
  </div>
</template>

<script setup>
import { XPlayer } from '~/composables/player/ui/x-player';

const darkMode = ref(true);
</script>

The next console message I get is: [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".

Thats okay, that is the same error I get in the original framework using Webpack, we use the same config property to use the correct Vue package for ESM in defineNuxtConfig of:

export default defineNuxtConfig({
    modules: ['@nuxtjs/tailwindcss'],
    alias: {
        vue: "vue/dist/vue.esm-bundler"
    },
    css: [
        '@/composables/assets/style/awn-vue.scss'
    ]
})

Now everything renders correctly, but we get to my final boss of errors:

[nitro <time> PM] ERROR Error: Could not load D:\Projects\Web Projects\<project_name>\node_modules\vue\dist\vue.esm-bundler\server-renderer (imported by node_modules/nuxt/dist/core/runtime/nitro/renderer.js): ENOENT: no such file or directory, open 'D:\Projects\Web Projects\<project_name>\node_modules\vue\dist\vue.esm-bundler\server-renderer'

But everything renders fine without error on client/browser. I get the 'loading player...' fallback before my player renders... except I get this error above in my terminal when running the dev server. Does server-renderer refer to the server render we don't need since we are using ClientOnly, would love a indepth answer on that? Sadly I can't just live with this error because if I were to clean install or reinstall (npm install) the entire project after deleting node_modules and using npm cache clean --force (which was recommended somewhere)... I get the endless 'Reloading server...' error (server unavailable in console btw) https://i.sstatic.net/OVvUl.png. Only if I follow this flow will I get a correctly rendering page (mainly just uncommenting the Vue alias in Nuxt config and then reenabling it after first render).

Any help or education/information is appreciated. Thank You!

Here is a contextualized view of the error in the terminal:

ℹ nuxt.config.ts updated. Restarting nuxt...
ℹ Using Tailwind CSS from ~/assets/css/tailwind.css                                                                                                                                                                                                     nuxt:tailwindcss
ℹ Tailwind Viewer: http://localhost:3000/_tailwind/                                                                                                                                                                                                     nuxt:tailwindcss
ℹ Vite client warmed up in 1605ms

[nitro <time> PM]  ERROR  Error: Could not load D:\Projects\Web Projects\<project_name>\node_modules\vue\dist\vue.esm-bundler\server-renderer (imported by node_modules/nuxt/dist/core/runtime/nitro/renderer.js): ENOENT: no such file or directory, open 'D:\Projects\Web Projects\<project_name>\node_modules\vue\dist\vue.esm-bundler\server-renderer'


undefined

✔ Nitro built in 612 ms                                                                                                                                                         
Nuxi 3.5.3           

Answer 1

The issue seems to be that if we set an alias for Vue in the config for my components we are globally replacing the the Vue alias used by the server side renderer, hence the missing server-renderer message. I just want to replace it for the client side (specifically for my specific components but client/server delineation is fine by me as well for now).

Thanks to this Github issue thread (@shtse8), this has been solved by the following addition to the nuxt.config.ts

export default defineNuxtConfig({
    modules: ['@nuxtjs/tailwindcss'],
    hooks: {
        'vite:extendConfig': (config, { isClient, isServer }) => {
          if (isClient)
            config.resolve.alias.vue = 'vue/dist/vue.esm-bundler.js'
        },
      },
})

This will generally result in a TS type error on the IDE linting end but seems to function without issue. Property 'vue' does not exist on type 'AliasOptions'. Property 'vue' does not exist on type 'readonly Alias[]'