razzle: Invariant Violation: Invalid tag for SVG

I was using svg-react-loader to import SVG in component in client side app.

I am trying to move to server-side and working around to integrate Razzle, resolving errors.

Somehow svgs are not working. When I open the url, this what getting displayed:

screen shot 2019-01-08 at 6 35 25 pm

build/static/media/ folder has two variant of each images, one has svg code other has react code to render svg.

The image in above pic has react code: screen shot 2019-01-08 at 6 37 03 pm

Any solution?

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 25

Most upvoted comments

Ok - found the issue. /babel-plugin-inline-react-svg > v1 uses babel 7. That’s where the error came from. Using “v0.5.4” and all good via babelrc. Cheers!

As some of you guys wanted the svgo support for Razzle I created a plugin which uses @svgr/webpack and it seems to work just fine (I’m using it myself 😄). https://www.npmjs.com/package/razzle-plugin-svgr