Importing SVG as react component does not work as mentioned in the docs.

🐛 bug report

I am trying to import SVG as react component based on the documentation from parcel site. Instead of the svg being rendered as a component in the page, the build actually fails. With an error - @parcel/core: No transformers found for src/assets/logo.jsx with pipeline: 'jsx'.

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

Using default babel configuration.

// package.json

{
  "name": "parcel-react-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel src/index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@parcel/transformer-svg-react": "^2.2.1",
    "parcel": "^2.2.1"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

// .parcelrc

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

🤔 Expected Behavior

The svg image should be loaded as a react component in the webpage.

😯 Current Behavior

An error is thrown saying @parcel/core: No transformers found for src/assets/logo.jsx with pipeline: 'jsx'.

💁 Possible Solution

🔦 Context

I am trying to import a svg image as a react component.

💻 Code Sample

Clone this repo and run yarn && yarn run dev

🌍 Your Environment

Software	Version(s)
Parcel	2.2.0
Node	16.13.2
npm/Yarn	8.1.2 / 1.22.17
Operating System	Windows 10

Attachments:

[astegmaier]

@MLNW - I hit the same error that you did - I think it’s related to #7389

I found two workarounds: (1) remove inline style props on any svgs you are importing through your jsx:*.svg named pipeline or (2) remove the @transformer/svg plugin from that pipeline (i.e. remove the "..." entry, which includes this by default). The final config that worked for me was:

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

[allocenx]

No, its not resolved, this is a workaround not a fix.