Vue compile doesn't work properly in any case

Environment

Nuxt CLI v3.0.0-27265876.3cd4494 19:48:54 RootDir: /home/projects/github-gjy9ju 19:48:56 Nuxt project info: 19:48:56

---

• Operating System: Linux also tested with Darwin
• Node Version: v14.19.0 also tested with v16.14.0
• Nuxt Version: 3.0.0-27265876.3cd4494
• Package Manager: npm@7.17.0 also tested with npm@8.3.1
• Bundler: Vite
• User Config: alias
• Runtime Modules: -
• Build Modules: -

---

Reproduction

pages/index.vue

<template>
  <div>
    <HtmlRenderer htmlText="<TestComponent :testProp='{a: `propA`, b: `propB` }' testString='test1' />" />
  </div>
</template>

components/HtmlRenderer.vue

<script lang="ts">
import { compile } from "vue";

export default defineComponent({
  props: {
    htmlText: {
      type: String,
      require: true,
      default: "",
    },
  },
  render() {
    return h(compile(this.htmlText));
  },
});
</script>

components/TestComponent.vue

<template>
  <div>
    <h1>{{ testString }}</h1>
    <slot />
    <h3>{{ testProp.a }} {{ testProp.b }}</h3>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    testProp: Object,
    testString: String,
  },
});
</script>

Describe the bug

The proposed reproduction doesn’t work. Browser console throws a warning: Runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".

---

Adding an alias at nuxt.config.ts:

import { defineNuxtConfig } from 'nuxt3'
import { resolve } from "path";

export default defineNuxtConfig({
  alias: {
    vue: resolve(__dirname, "./node_modules/vue/dist/vue.esm-bundler.js"),
  }
})

VSCode terminal throws and error: Cannot start nuxt: Error: Cannot find module /node_modules/vue/dist/vue.cjs.js/server-renderer imported[...]

---

If I disable SSR at nuxt.config.ts with the alias:

import { defineNuxtConfig } from 'nuxt3'
import { resolve } from "path";

export default defineNuxtConfig({
  alias: {
    vue: resolve(__dirname, "./node_modules/vue/dist/vue.esm-bundler.js"),
  },
  ssr: false
})

Browser console throws another warning: Failed to resolve component: TestComponent

If I take an old version of nuxt 3 (like [e-mail]52b79) the last option works perfectly.

Additional context

No response

Logs

No response

[shawncamp]

@abdonrd I do have the TS error. I’ve had to ignore it.

I’ll test on my end without the other entries. Thank you.

[korgan00]

@korgan00 This worked for me.

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({

  hooks: {
    'vite:extendConfig': (config, { isClient, isServer }) => {
      if (isClient)
        config.resolve.alias.vue = 'vue/dist/vue.esm-bundler'
    },
  },

})

Thank you! I also needed to use components.global = true. Now it is working. I provide the nuxt.config.ts solution.

import { defineNuxtConfig } from 'nuxt3';

export default defineNuxtConfig({
  components: {
    global: true,
    dirs: ['~/components']
  },
  hooks: {
    'vite:extendConfig': (config, { isClient, isServer }) => {
      if (isClient)
        config.resolve.alias.vue = 'vue/dist/vue.esm-bundler.js'
    },
  },
});