vjsf: missing component to render vjsf node "markdown"

[boutils]

Very very good library, I love it!

I am trying to make the "markdown" plugin work, but I can't find a way to do it. My app is build with Vite. See all my dependencies here:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "prepare": "husky",
    "typecheck": "tsc --noEmit"
  },
  "type": "module",
  "dependencies": {
    "@koumoul/vjsf": "^3.0.0-beta.9",
    "@koumoul/vjsf-markdown": "^0.1.0",
    "vue": "^3.4.21",
    "vuetify": "^3.5.15"
  },
  "devDependencies": {
    "@types/node": "^20.12.7",
    "@typescript-eslint/parser": "^6.21.0",
    "@vitejs/plugin-vue": "^5.0.4",
    "@vue/eslint-config-prettier": "^8.0.0",
    "@vue/eslint-config-typescript": "^12.0.0",
    "@vue/tsconfig": "^0.5.1",
    "esbuild": "^0.20.2",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.24.1",
    "eslint-plugin-vuetify": "^2.3.0",
    "husky": "^9.0.11",
    "npm-run-all2": "^6.1.2",
    "postcss-html": "^1.6.0",
    "prettier": "^3.2.5",
    "sass": "^1.75.0",
    "stylelint": "^16.3.1",
    "stylelint-config-recommended-scss": "^14.0.0",
    "stylelint-config-recommended-vue": "^1.5.0",
    "stylelint-scss": "^6.2.1",
    "typescript": "^5.3.3",
    "vite": "^5.2.8",
    "vue-tsc": "^2.0.13"
  }
}

I follow the example from the doc, installed the dependency:

npm install @koumoul/vjsf-markdown

And create my component from the demo:

<template>
  <v-container>
    <v-row>
      <v-col>
        <v-form>
          <vjsf
            v-model = "data"
            :schema = "schema">
          </vjsf>
        </v-form>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
  import Vjsf from '@koumoul/vjsf';
  import '@koumoul/vjsf-markdown';

  export default {
    name: 'stoicForm',

    components: { Vjsf },

    props: {
      prefixId: {
        type: String,
        required: true,
      },
    },

    data() {
      return {
        data: { foo: 'foo', bar: 'bar' },
        schema: {
          "type": "object",
            "properties": {
              foo: {
                type: 'string',
                title: 'Some text',
              },
              bar: {
                type: 'string',
                layout: 'markdown',
                title: 'Some markdown',
              }
            }
        },
      };
    },
  };
</script>

But I always end up with the following error:

vjsf: missing component to render vjsf node "markdown", maybe you forgot to register a component from a plugin ?

However, if you look this screenshot, you can see that the markdown plugin is well registred (from Chrome dev tool console).

What am I doing wrong ? Can anyone please help me understand?

[boutils]

@albanm Do you have any hint? I struggled with this issue and any help would be more than welcome.

[albanm]

Indeed it is broken and it seems that it is working only in the dev environment of vjsf, sorry about that. The way I manage the list of registered components as a module variable must not be the right way to do it. I am looking for a fix.

[boutils]

Thanks a ton!

[albanm]

I abandoned for the time being auto-registration of node components and instead rely on simple option passing. You can have a look here.

[boutils]

That seems pragmatic and good enough. Thank you 🙏