@parcel/transformer-svg-react does not work as expected according to documentation

[mseymour]

🐛 bug report

I am trying to import animated SVG files to use inline but Parcel and the React SVG transformer package apparently is not being detected by my .parcelrc.

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

My current .parcelrc config:

{
  "extends": "@parcel/config-default",
  "validators": {
    "*.{ts,tsx}": ["@parcel/validator-typescript"]
  },
  "transformers": {
    "jsx:*.svg": ["...", "@parcel/transformer-svg-react"]
  }
}

🤔 Expected Behavior

I should be able to import SVGs inline.

😯 Current Behavior

Code:

import TickerItemBg from 'jsx:../assets/ticker/item.svg';
// ...
<TickerItemBg className="ticker-box__bg" />

I get this error when building:

[1] 🚨 Build failed.
[1]
[1] @parcel/core: No transformers found for src/graphics/assets/ticker/item.jsx with
[1] pipeline: 'jsx'.
[1]   /Users/mark/Projects/nodecg/bundles/stream-overlay/.parcelrc:6:3
[1]      5 |   },
[1]   >  6 |   "transformers": {
[1]   >    |   ^^^^^^^^^^^^^^^^^
[1]   >  7 |     "jsx:*.svg": ["...", "@parcel/transformer-svg-react"]
[1]   >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[1]   >  8 |   }
[1]   >    | ^^^
[1]      9 | }
[1]     10 |
[1]
[1]   /Users/mark/Projects/nodecg/bundles/stream-overlay/node_modules/@parcel/config-default/index.json:3:3
[1]      2 |   "bundler": "@parcel/bundler-default",
[1]   >  3 |   "transformers": {
[1]   >    |   ^^^^^^^^^^^^^^^^^
[1]   >  4 |     "types:*.{ts,tsx}": ["@parcel/transformer-typescript-types"],
[1]   >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[1]   >  5 |     "bundle-text:*": ["...", "@parcel/transformer-inline-string"],
[1]   >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[1]   >  6 |     "data-url:*": ["...", "@parcel/transformer-inline-string"],
[1]   >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[1]   >  7 |     "worklet:*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
[1]   >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[1]   >  8 |       "@parcel/transformer-worklet",
[1]   >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[1]   >  9 |       "..."
[1]   >    | ^^^^^^^^^^^
[1]   > 10 |     ],
[1]   >    | ^^^^^^
[1]   > 11 |     "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
[1]   >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[1]   > 12 |       "@parcel/transformer-babel",
[1]   >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[1]   > 13 |       "@parcel/transformer-js",
[1]   >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

🌍 Your Environment

Software	Version(s)
Parcel	2.10.2
Node	v20.5.0
npm	9.8.0
Operating System	macOS Sonoma 14.0 (23A344)

[yoonwaiyan]

I'm having the same issue here as OP...

[yoonwaiyan]

There's a bug report and a suggested workaround here #7587

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.