allow using vue runtime compiler in built nuxt app

Environment

Nuxt CLI v3.0.0-rc.1 11:41:57 RootDir: /home/jhuang/projets/nuxt3 11:41:59 Nuxt project info: 11:41:59

---

• Operating System: Linux
• Node Version: v16.13.1
• Nuxt Version: 3.0.0-rc.1
• Package Manager: npm@8.3.0
• Builder: vite
• User Config: components, hooks
• Runtime Modules: -
• Build Modules: -

---

Reproduction

app.vue

<template>
  <div>
    <Test />
  </div>
</template>

<script>
import {defineNuxtComponent} from "#app";
import Test from "./components/test"

export default defineNuxtComponent({
  components: {
    Test
  }
})
</script>

components/test.ts

import {defineNuxtComponent} from "#app";

export default defineNuxtComponent({
    name: "TestCompile",
    template: "<div>test</div>"
})

nuxt.config.ts

import {defineNuxtConfig} from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({


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

    },

})

• run npm run build
• run npm run preview
• open http://0.0.0.0:3000/
• Error in console + server crash :

file:///home/jhuang/projets/nuxt3/.output/server/chunks/index.mjs:9869
    return (compileCache[cacheKey] = Function('require', code)(commonjsRequire));
                                     ^

TypeError: Cannot convert object to primitive value
    at Function (<anonymous>)
    at ssrCompile (file:///home/jhuang/projets/nuxt3/.output/server/chunks/index.mjs:9869:38)
    at renderComponentSubTree (file:///home/jhuang/projets/nuxt3/.output/server/chunks/index.mjs:9960:30)
    at renderComponentVNode (file:///home/jhuang/projets/nuxt3/.output/server/chunks/index.mjs:9946:16)
    at Object.ssrRenderComponent (file:///home/jhuang/projets/nuxt3/.output/server/chunks/index.mjs:10361:12)
    at _sfc_ssrRender (file:///home/jhuang/projets/nuxt3/.output/server/chunks/app/server.mjs:4048:32)
    at renderComponentSubTree (file:///home/jhuang/projets/nuxt3/.output/server/chunks/index.mjs:10001:13)
    at renderComponentVNode (file:///home/jhuang/projets/nuxt3/.output/server/chunks/index.mjs:9946:16)
    at Object.ssrRenderComponent (file:///home/jhuang/projets/nuxt3/.output/server/chunks/index.mjs:10361:12)
    at default (file:///home/jhuang/projets/nuxt3/.output/server/chunks/app/server.mjs:4022:42)

 ERROR  Command failed with exit code 1: node ./server/index.mjs                                                      11:47:51

  at makeError (node_modules/nuxi/dist/chunks/index5.mjs:1242:11)
  at handlePromise (node_modules/nuxi/dist/chunks/index5.mjs:2071:26)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async Object.invoke (node_modules/nuxi/dist/chunks/preview.mjs:224:5)
  at async _main (node_modules/nuxi/dist/cli.mjs:46:20)

Describe the bug

I’m trying to use the template key in the component object of defineNuxtConfig to load components with dynamic templates. However the server seems to crash when it tries to compile the template server-side. It happens in production but not in dev.

seems like there’s a TODO remining in .output/server/chunks/index.mjs at line 9841

function ssrCompile(template, instance) {
    // TODO: This is copied from runtime-core/src/component.ts and should probably be refactored
    const Component = instance.type;
    const { isCustomElement, compilerOptions } = instance.appContext.config;
    const { delimiters, compilerOptions: componentCompilerOptions } = Component;
    const finalCompilerOptions = shared.extend(shared.extend({
        isCustomElement,
        delimiters
    }, compilerOptions), componentCompilerOptions);
    finalCompilerOptions.isCustomElement =
        finalCompilerOptions.isCustomElement || shared.NO;
    finalCompilerOptions.isNativeTag = finalCompilerOptions.isNativeTag || shared.NO;
    const cacheKey = JSON.stringify({
        template,
        compilerOptions: finalCompilerOptions
    }, (key, value) => {
        return shared.isFunction(value) ? value.toString() : value;
    });
    const cached = compileCache[cacheKey];
    if (cached) {
        return cached;
    }
    finalCompilerOptions.onError = (err) => {
        {
            throw err;
        }
    };
    const { code } = compilerSsr.compile(template, finalCompilerOptions);
    return (compileCache[cacheKey] = Function('require', code)(commonjsRequire));
}

Additional context

No response

Logs

No response

[huang-julien]

@Hyperblaster yes i’ve ran into this issue too. I’ve managed to work around this by compiling the template into render function with compile() from the vue package. Instead of using template, prefer using compile

import {defineNuxtComponent} from "#imports";
import {compile} from "vue";

export default defineNuxtComponent({
  render: compile(template)
})

I have’nt figured out in what and why it does trigger this issue. It seems that in some cases, the ssrRender function compiled when using template does not prepend the _ssrInterpolate function parameters with _ctx.

[huang-julien]

Any workarounds on this? I’ve tried to use your config @huang-julien but without luck on the rc-4 release.

CompilerSsr in .output/chunks/server/handlers/renderer.mjs still points to the mock resulting in the TypeError: Cannot convert object to primitive value.

@tkjaergaard this is my latest config for nuxt rc3, it should work for rc4 too. I think this can be refactored with the vueExternals option

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({

  srcDir: './src',

  components: false,

  nitro: {
    commonJS: {
      dynamicRequireTargets: [
        './node_modules/@vue/compiler-core',
        './node_modules/@vue/compiler-dom',
        './node_modules/@vue/compiler-ssr',
        './node_modules/vue/server-renderer',
        // allow h(), you can remove it if you use only objects to define vue components
        './node_modules/vue'
      ]
    },
    externals: {
      // no need for devtools -- should be mocked
      traceOptions: {
        ignore: (file) => {
          return /@vue(\/|\\)devtools-api/.test(file)
        }
      }
    }
  },

  alias: {
    '@vue/compiler-core': '@vue/compiler-core',
    '@vue/compiler-dom': '@vue/compiler-dom',
    '@vue/compiler-ssr': '@vue/compiler-ssr',
    'vue/server-renderer': 'vue/server-renderer'
  },

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

  vite: {
    plugins: [
      eslintPlugin()
    ]
  }
})