Importing SVG as React components doesn't work with named pipeline

[ChristophP]

🐛 bug report

The docs provide an example of using SVG with React here https://parceljs.org/languages/svg/#importing-as-a-react-component.
However, this example does not work and errors. (I couldn't get named pipelines to work in general)

🎛 Configuration (.babelrc, package.json, cli command)

Basically it the exact example given in the docs https://parceljs.org/languages/svg/#importing-as-a-react-component

// .parcelrc
{
  "extends": "@parcel/config-default",
  "transformers": {
    "jsx:*.svg": ["...", "@parcel/transformer-svg-react"]
  }
}

// example.jsx
import Icon from "jsx:./icon.svg";

export const App = () => <Icon />;

<!-- icon.svg -->
<?xml-stylesheet href="style.css" ?>
<svg viewBox="0 0 240 20" xmlns="http://www.w3.org/2000/svg">
  <text>Red text</text>
</svg>

Then running parcel build example.jsx produces the error.

🤔 Expected Behavior

The Svg should be turned into a React component as shown in the docs. https://parceljs.org/languages/svg/#importing-as-a-react-component

😯 Current Behavior

When runnning parcel build this error happens.

~/.../freigeist/parcel-bug >>> npx parcel build example.jsx                                                                                                                                                       
🚨 Build failed.

@parcel/core: No transformers found for icon.jsx with pipeline: 'jsx'.

  /home/deedo/projects/freigeist/parcel-bug/.parcelrc:3:3
    2 |   "extends": "@parcel/config-default",
  > 3 |   "transformers": {
  >   |   ^^^^^^^^^^^^^^^^^
  > 4 |     "jsx:*.svg": ["...", "@parcel/transformer-svg-react"]
  >   | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 5 |   }
  >   | ^^^
    6 | }
    7 | 
  
  /home/deedo/projects/freigeist/parcel-bug/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"],
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  >  7 |     "worklet:*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  >  8 |       "@parcel/transformer-worklet",
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  >  9 |       "..."
  >    | ^^^^^^^^^^^
  > 10 |     ],
  >    | ^^^^^^
  > 11 |     "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 12 |       "@parcel/transformer-babel",
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 13 |       "@parcel/transformer-js",
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

💁 Possible Solution

Using an unnamed pipeline. But then it's not possible anymore to have SVGs that aren't react components.

🔦 Context

I before I used an unnamed pipeline to transform all svgs to react components.
But now I have a need to transform only some of them (due to another bug which might be related to how parcel transformes SVGs).

💻 Code Sample

See above

🌍 Your Environment

Software	Version(s)
Parcel	2.12.0
Node	20
npm/Yarn	npm 10
Operating System	manjaro linux