`@parcel/transformer-svg-react` does not understand SVGs from node_modules

[devatrox]

🐛 bug report

I'm trying to use an external SVG file from node_modules but it gives the error @parcel/transformer-js: Expected ;, got xmlns or something similar. The same does not happen when importing SVGs from the src folder. The whole thing used to work without problems before I switched to Parcel 2.

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

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

{
    "dependencies": {
        "@primer/octicons": "^15.0.1",
        "react": "^17.0.2",
        "react-dom": "^17.0.2"
    },
    "devDependencies": {
        "@parcel/transformer-svg-react": "^2.0.0-rc.0",
        "@types/react": "^17.0.19",
        "@types/react-dom": "^17.0.9",
        "parcel": "^2.0.0-rc.0",
        "typescript": "^4.3.5"
    }
}

🤔 Expected Behavior

No error, an SVG is displayed.

😯 Current Behavior

An error is displayed in the shell

🚨 Build failed.

@parcel/transformer-js: Expected ;, got xmlns

  /Users/devatrox/Projekte/svg-test/node_modules/@primer/octicons/build/svg/archive-24.svg:3:19

💁 Possible Solution

🔦 Context

💻 Code Sample

import React from "react";
import ReactDOM from "react-dom";
import Svg from "@primer/octicons/build/svg/archive-24.svg"; // does not work
// import Svg from "./archive-24.svg"; // works

ReactDOM.render(
    <Svg />,
    document.getElementById("app"),
);

I created a sample repo: https://github.com/devatrox/svg-test

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-rc.0
Node	14.17.0
npm/Yarn	7.21.0
Operating System	macOS 11.5
React	17.0.19
Typescript	4.3.5

[devongovett]

I guess that's because it's converting the SVG to JSX, but JSX is not allowed inside node_modules...

[mischnic]

Related: https://github.com/parcel-bundler/parcel/issues/5206

[devatrox]

I guess that's because it's converting the SVG to JSX, but JSX is not allowed inside node_modules...

Is there a workaround other than copying the SVG to the src folder?

[sznowicki]

Isn't there a react package for this?

https://primer.style/octicons/packages/react

[devatrox]

@sznowicki Octicons was just an example I used to illustrate it easily. If there happens to be a React library that is great, but it doesn't solve the actual issue for cases where there is no React library.

[Drecu]

I'm having the same problem. As soon as parcel wants to read the .svg from node_modules it throws me that message:

@parcel/transformer-js: Expected ;, got height
....path/to/node_modulesfile...
 2 | <svg width="32px" height="36px" viewBox="0 0 32 36" version="1.
  > 3 | nu" stroke="none" stroke-width="1" fill="none" fill-rule="eveno
  >   |      ^^^^^^

here a small part of the svg:

<svg width="32px" height="36px" viewBox="0 0 32 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Menu" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="BD/Dashboard" transform="translate(-20.000000, -743.000000)">
....

For me it looks like the parameters in the svg tag can't be read but i am not sure, just a theory.

[reyronald]

So there's no workaround for this at the moment?

[AndyOGo]

@devongovett

I guess that's because it's converting the SVG to JSX, but JSX is not allowed inside node_modules...

Why would you do that? If a node module contains .jsx files, then they should be treated as such, ignoring their location in the file system.

[mehdisadeghi]

fwiw, I experienced this bug when importing css from node_modules. The css in question has a url to an svg which triggers this bug.

[Vico1993]

I guess that's because it's converting the SVG to JSX, but JSX is not allowed inside node_modules...

Hey do we have a follow up on this? Is it still block with parcel 2.11 ? 🤔