Transformer plugin that generates Vue SFC does not work

[lorefnon]

🐛 bug report

Attempting to write a transformer that converts svg files to vue components does not appear to be working as expected

🎛 Configuration/Setup

Following the documentation of Transformer and the svg-react plugin implementation, I am attempting to write a parcel transformer plugin that converts imported svg files to vue components:

🤔 Expected Behavior

I had expected the following minimal implementation to be adequate (Full source):

    async transform({ asset, config }) {
        const svg = await asset.getCode();
        asset.type = "vue";
        asset.bundleBehavior = "inline";
        asset.setCode(`<template>${svg}</template>`);
        return [asset];
    },

Basically I was assuming that if I return an asset of type=vue where the svg is wrapped inside a template block, the default pipeline for vue3 sfc will take care of processing the generated component.

My .parcelrc is as follows:

{
    "extends": "@parcel/config-default",
    "transformers": {
        "vue:*.svg": [
           "...",
            "@lorefnon/parcel-transformer-svg-vue"
        ]
    }
}

😯 Current Behavior

This does not work. And I end up with errors saying that it is unable to find a transformer to further process the asset returned by my transformer.

Server running at http://localhost:1234
🚨 Build failed.

@parcel/core: No transformers found for src/assets/icons/warning.vue with pipeline: 'vue'.

  /home/lorefnon/Workspace/reinoult/frontend/.parcelrc:3:5
    2 |     "extends": "@parcel/config-default",
  > 3 |     "transformers": {
  >   |     ^^^^^^^^^^^^^^^^^
  > 4 |         "vue:*.svg": [
  >   | ^^^^^^^^^^^^^^^^^^^^^^
  > 5 |             "@lorefnon/parcel-transformer-svg-vue"
  >   | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 6 |         ],
  >   | ^^^^^^^^^^
  > 7 |     }
  >   | ^^^^^
    8 | }
  
  /home/lorefnon/Workspace/reinoult/node_modules/.pnpm/@parcel+config-default@2.9.3_@parcel+core@2.9.3_typescript@5.2.2/node_modules/@parcel/config-default/index.json:3:3
     2 |   "bundler": "@parcel/bundler-default",
  >  3 |   "transformers": {
  >    |   ^^^^^^^^^^^^^^^^^
  >  4 |     "types:*.{ts,tsx}": ["@parcel/transformer-typescript-types"],
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  >  5 |     "bundle-text:*": ["...", "@parcel/transformer-inline-string"],
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  >  6 |     "data-url:*": ["...", "@parcel/transformer-inline-string"],

If I also add vue transformer explicitly (which I don't see why would be needed):

{
    "extends": "@parcel/config-default",
    "transformers": {
        "vue:*.svg": [
            "...", 
            "@lorefnon/parcel-transformer-svg-vue"
        ],
        "vue:*.vue": [
            "...", 
            "@parcel/transformer-vue"
        ]
    }
}

Now the dev server reports that everything has been built successfully but when I access the ui in browser, it fails to resolve the svg modules and I get a runtime error.

idex.b7a05eb9.js:61 Uncaught Error: Cannot find module 'vue:../../assets/icons/warning.svg'
    at newRequire (index.b7a05eb9.js:61:19)
    at newRequire (index.b7a05eb9.js:45:18)
    at localRequire (index.b7a05eb9.js:84:35)
    at 9LNAw.vue (fs-initializer.vue:46:1)
    at newRequire (index.b7a05eb9.js:71:24)
    at localRequire (index.b7a05eb9.js:84:35)
    at initialize (fs-initializer.vue:4:12)
    at 8nCLl.3e3393ff5748202f (fs-initializer.vue:12:1)
    at newRequire (index.b7a05eb9.js:71:24)
    at localRequire (index.b7a05eb9.js:84:35)

I am also convinced that this is not an issue with the transform itself - if I generate the vue component as a file as a separate step outside parcel and then import the generated file from my components - vue is able to handle it just fine and everything works.

🌍 Your Environment

Software	Version(s)
Parcel	2.9.3
Node	20.2.0
npm/Yarn	npm 9.6.6
Operating System	Ubuntu 23.04