Error transforming file.vue: v-model can only be used on <input>, <textarea> and <select> elements. Custom webcomponents not working with v-model

Environment

---

• Operating System: Linux
• Node Version: v18.7.0
• Nuxt Version: 3.0.0-rc.8
• Package Manager: pnpm@7.9.3
• Builder: vite
• User Config: typescript, vue, modules, formkit, vite, buildModules
• Runtime Modules: ./modules/sdx, @formkit/nuxt@1.0.0-beta.9
• Build Modules: @pinia/nuxt@0.3.1

---

Reproduction

Codesandbox

Reproduction link

Manual Reproduction

1. Create a nuxt project
2. Create a new .vuefile
3. Add a custom input webcomponent (mine is from a stenciljs library, Note: the stencil library must have ssr support)
4. Add a v-modelto the input
5. Serve the app

Describe the bug

I use a custom input webcomponent from a stenciljs webcomponent library. Here is my .vuefile:

<template>
  <div class="container">
    <div class="row">
      <sdx-input
        label="RPA Key"
        type="text"
        class="col-xs"
        v-model="newRpa.rpa"
      ></sdx-input>
      <sdx-input
        label="RPA Title"
        type="text"
        class="col-xs"
        v-model="newRpa.title"
      ></sdx-input>
    </div>
    <div class="row">
      <sdx-input
        label="Automic start object"
        type="text"
        class="col-xs"
        v-model="newRpa.startObject"
      ></sdx-input>
    </div>
    <div class="row">
      <sdx-input
        label="Form Schema"
        type="textarea"
        class="col-xs"
        v-model="newRpa.formSchema"
      ></sdx-input>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { rpa } from '@prisma/client';
const newRpa = reactive<rpa>({
  id: undefined,
  rpa: '',
  title: '',
  startObject: '',
  formSchema: '',
});
</script>

When starting the app I get this warning:

WARN  [SSR] Error transforming /usr/bin/smap/pages/rpa/add.vue: v-model can only be used on <input>, <textarea> and <select> elements.

and this warning leads to this errors:

[Vue Router warn]: uncaught error during route navigation:
TypeError: Cannot read properties of undefined (reading '__vccOpts')
...
[Vue Router warn]: Component "default" in record with path "/rpa/add" is not a valid component. Received "undefined".
[Vue Router warn]: uncaught error during route navigation:
Error: Invalid route component

You can see the whole log output down below

Here is my nuxt.config.ts:

import { defineNuxtConfig } from 'nuxt';

export default defineNuxtConfig({
  typescript: { shim: false },
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => /sdx-.+/.test(tag),
    },
  },
  modules: ['./modules/sdx', '@formkit/nuxt'],
  formkit: {
    configFile: './formkit.config.ts',
  },
  vite: {
    server: {
      hmr: {
        protocol: 'ws',
        host: '0.0.0.0',
      },
    },
  },
  buildModules: ['@pinia/nuxt'],
});

Here is my package.json:

{
  "private": true,
  "scripts": {
    ...
  },
  "dependencies": {
    "@formkit/nuxt": "1.0.0-beta.9",
    "@formkit/vue": "1.0.0-beta.9",
    "@nuxt/kit": "npm:@nuxt/kit-edge@latest",
    "@pinia/nuxt": "^0.3.0",
    "@prisma/client": "^4.2.1",
    "@swisscom/sdx": "file:./sdx",
    "nuxt": "3.0.0-rc.8",
    "prisma": "^4.2.1",
    "sass": "^1.53.0",
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@commitlint/cli": "^17.0.3",
    "@commitlint/config-conventional": "^17.0.3",
    "@commitlint/types": "^17.0.0",
    "@formkit/themes": "1.0.0-beta.9",
    "@typescript-eslint/eslint-plugin": "^5.30.5",
    "@typescript-eslint/parser": "^5.30.5",
    "eslint": "^8.19.0",
    "eslint-plugin-nuxt": "^3.2.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.2.0",
    "husky": "^8.0.1",
    "luxon": "^3.0.1",
    "pinia": "^2.0.16",
    "prettier": "2.7.1",
    "typescript": "^4.7.4"
  }
}

Additional context

I run the app in a docker compose environment.

Logs

smap-app_dev-1  | 2022-08-19T08:15:21.628461345Z  WARN  [SSR] Error transforming /usr/bin/smap/pages/rpa/add.vue: v-model can only be used on <input>, <textarea> and <select> elements.
smap-app_dev-1  | 2022-08-19T08:15:21.628473762Z
smap-app_dev-1  | 2022-08-19T08:15:21.628477095Z   at Object.createCompilerError (node_modules/.pnpm/@vue+compiler-core@3.2.37/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:19:19)
smap-app_dev-1  | 2022-08-19T08:15:21.628480595Z   at Object.createDOMCompilerError (node_modules/.pnpm/@vue+compiler-dom@3.2.37/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.js:2483:25)
smap-app_dev-1  | 2022-08-19T08:15:21.628486137Z   at ssrTransformModel (node_modules/.pnpm/@vue+compiler-ssr@3.2.37/node_modules/@vue/compiler-ssr/dist/compiler-ssr.cjs.js:1060:41)
smap-app_dev-1  | 2022-08-19T08:15:21.628488387Z   at Array.ssrPostTransformElement (node_modules/.pnpm/@vue+compiler-ssr@3.2.37/node_modules/@vue/compiler-ssr/dist/compiler-ssr.cjs.js:360:56)
smap-app_dev-1  | 2022-08-19T08:15:21.628490553Z   at traverseNode (node_modules/.pnpm/@vue+compiler-core@3.2.37/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2211:19)
smap-app_dev-1  | 2022-08-19T08:15:21.628492678Z   at traverseChildren (node_modules/.pnpm/@vue+compiler-core@3.2.37/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2153:9)
smap-app_dev-1  | 2022-08-19T08:15:21.628494887Z   at traverseNode (node_modules/.pnpm/@vue+compiler-core@3.2.37/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2204:13)
smap-app_dev-1  | 2022-08-19T08:15:21.628496970Z   at traverseChildren (node_modules/.pnpm/@vue+compiler-core@3.2.37/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2153:9)
smap-app_dev-1  | 2022-08-19T08:15:21.628499095Z   at traverseNode (node_modules/.pnpm/@vue+compiler-core@3.2.37/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2204:13)
smap-app_dev-1  | 2022-08-19T08:15:21.628501178Z   at traverseChildren (node_modules/.pnpm/@vue+compiler-core@3.2.37/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2153:9)
smap-app_dev-1  | 2022-08-19T08:15:21.628503262Z
smap-app_dev-1  | 2022-08-19T08:15:25.349230305Z ✔ Vite server built in 10103ms
smap-app_dev-1  | 2022-08-19T08:15:26.429107500Z ✔ Nitro built in 1017 ms
smap-app_dev-1  | 2022-08-19T08:15:27.409256209Z [Vue Router warn]: uncaught error during route navigation:
smap-app_dev-1  | 2022-08-19T08:15:27.435881334Z TypeError: Cannot read properties of undefined (reading '__vccOpts')
smap-app_dev-1  | 2022-08-19T08:15:27.435932375Z     at file:///usr/bin/smap/node_modules/.pnpm/vue-router@4.1.3_vue@3.2.37/node_modules/vue-router/dist/vue-router.mjs:2086:55
smap-app_dev-1  | 2022-08-19T08:15:27.435940167Z     at async file:///usr/bin/smap/.nuxt/dist/server/server.mjs:2685:94
smap-app_dev-1  | 2022-08-19T08:15:27.435942834Z     at async Object.callAsync (file:///usr/bin/smap/node_modules/.pnpm/unctx@2.0.1/node_modules/unctx/dist/index.mjs:53:16)
smap-app_dev-1  | 2022-08-19T08:15:27.435955250Z     at async applyPlugin (file:///usr/bin/smap/.nuxt/dist/server/server.mjs:398:23)
smap-app_dev-1  | 2022-08-19T08:15:27.435958542Z     at async Module.applyPlugins (file:///usr/bin/smap/.nuxt/dist/server/server.mjs:408:5)
smap-app_dev-1  | 2022-08-19T08:15:27.435960792Z     at async createNuxtAppServer (file:///usr/bin/smap/.nuxt/dist/server/server.mjs:46:7)
smap-app_dev-1  | 2022-08-19T08:15:27.435962750Z     at async Object.renderToString (file:///usr/bin/smap/node_modules/.pnpm/vue-bundle-renderer@0.4.2/node_modules/vue-bundle-renderer/dist/runtime.mjs:172:19)
smap-app_dev-1  | 2022-08-19T08:15:27.435964834Z     at async file:///usr/bin/smap/.nuxt/dev/index.mjs:586:21
smap-app_dev-1  | 2022-08-19T08:15:27.435966709Z     at async file:///usr/bin/smap/.nuxt/dev/index.mjs:107:22
smap-app_dev-1  | 2022-08-19T08:15:27.435968542Z     at async file:///usr/bin/smap/node_modules/.pnpm/h3@0.7.15/node_modules/h3/dist/index.mjs:492:19
smap-app_dev-1  | 2022-08-19T08:15:27.435970667Z [Vue Router warn]: Component "default" in record with path "/rpa/add" is not a valid component. Received "undefined".
smap-app_dev-1  | 2022-08-19T08:15:27.435973125Z [Vue Router warn]: uncaught error during route navigation:
smap-app_dev-1  | 2022-08-19T08:15:27.435975209Z Error: Invalid route component
smap-app_dev-1  | 2022-08-19T08:15:27.435977250Z     at extractComponentsGuards (file:///usr/bin/smap/node_modules/.pnpm/vue-router@4.1.3_vue@3.2.37/node_modules/vue-router/dist/vue-router.mjs:2037:27)
smap-app_dev-1  | 2022-08-19T08:15:27.435979375Z     at file:///usr/bin/smap/node_modules/.pnpm/vue-router@4.1.3_vue@3.2.37/node_modules/vue-router/dist/vue-router.mjs:3260:22
smap-app_dev-1  | 2022-08-19T08:15:27.435981584Z     at async file:///usr/bin/smap/.nuxt/dist/server/server.mjs:2752:7
smap-app_dev-1  | 2022-08-19T08:15:27.435983542Z     at async createNuxtAppServer (file:///usr/bin/smap/.nuxt/dist/server/server.mjs:47:7)
smap-app_dev-1  | 2022-08-19T08:15:27.435985709Z     at async Object.renderToString (file:///usr/bin/smap/node_modules/.pnpm/vue-bundle-renderer@0.4.2/node_modules/vue-bundle-renderer/dist/runtime.mjs:172:19)
smap-app_dev-1  | 2022-08-19T08:15:27.435989209Z     at async file:///usr/bin/smap/.nuxt/dev/index.mjs:586:21
smap-app_dev-1  | 2022-08-19T08:15:27.436033209Z     at async file:///usr/bin/smap/.nuxt/dev/index.mjs:107:22
smap-app_dev-1  | 2022-08-19T08:15:27.436037667Z     at async file:///usr/bin/smap/node_modules/.pnpm/h3@0.7.15/node_modules/h3/dist/index.mjs:492:19
smap-app_dev-1  | 2022-08-19T08:15:27.436039750Z     at async Server.nodeHandler (file:///usr/bin/smap/node_modules/.pnpm/h3@0.7.15/node_modules/h3/dist/index.mjs:438:7)

[GionRubitschung]

Hhhm right. Thanks for the reproduction. I’ll search around a bit in the vite/vue docs and code, maybe I find something. I’ll keep this thread updated.

Also, can you do me a favor and delete the web-component-repro? Altough I can have it externally I still would like the control over it since it is an internal package 😃 Thanks.

I created a fork so your code won’t get lost.

[GionRubitschung]

Vue3 official does NOT support v-model on custom elements: https://vuejs.org/api/built-in-directives.html#v-model

There is an open issue with a workaround (custom directive): https://github.com/vuejs/vue/issues/7830

I am closing the issue since this is coming from vue and there is a workaround