Invariant Violation: Invalid tag for SVG #881

Rahul-Sagore · 2019-01-08T13:07:35Z

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:

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:

Any solution?

The text was updated successfully, but these errors were encountered:

Rahul-Sagore · 2019-01-09T13:09:33Z

So i was using

import Logo from 'images/logotype.svg';

and using it like

<Logo />

That is why giving error. But if Use it like <img src={ Logo } /> The error is gone and page is rendering. But image is still not working.

When I open localhost:3001/image path url, it displays:

And when I open that static/media/logotype.svg, the content is javascript & React.

How should I handle this?

sergeyromanovsky · 2019-02-04T15:36:45Z

I have the same problem, using @svgr

jakobo · 2019-02-04T21:33:39Z

Instead of using svg-react-loader, you may want to instead use inline-react-svg + svgo. I haven't published this plugin, but here's what I'm using internally since the razzle-dev-utils are easy to work with:

// file: razzle.config.js

const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');
const babelLoaderFinder = makeLoaderFinder('babel-loader');

const svgPlugin = (baseConfig, { target, dev }, webpack) => {
  // ========================================================================
  // SVG transformations via babel
  // ========================================================================
  // add support for SVG transformations

  const config = Object.assign({}, baseConfig);
  const babelLoader = config.module.rules.find(babelLoaderFinder);
  if (!babelLoader) {
    throw new Error(`'babel-loader' required for svg loader`);
  }
  
  const irs = ['inline-react-svg', {
    svgo: {
      plugins: [
        { removeAttrs: { attrs: '(data-name)|(width)|(height)' } },
        { cleanupIDs: true }
      ]
    }
  }];

  if (!babelLoader.use[0].options.plugins) {
    babelLoader.use[0].options.plugins = [];
  }

  babelLoader.use[0].options.plugins.push(['inline-react-svg', {
    svgo: {
      plugins: [
        { removeAttrs: { attrs: '(data-name)|(width)|(height)' } },
        { cleanupIDs: true }
      ]
    }
  }]);

  return config;
};

module.exports = {
  plugins: [svgPlugin]
};

The combination of the two above items will let you do import MySvg from './path/to/my.svg'; and use it as a react component via <MySvg {...props} />

(edit: I updated the plugin configuration to a single file and cleaned it up so someone else can leverage this code easily)

kkarkos · 2019-02-05T22:22:04Z

@jakobo Thanks for sharing. I'm getting Cannot read property 'push' of undefined, "Using .babelrc defined in your app root". "babelLoader" does not have a "plugins" attribute. How does your ".babelrc" look like?

jakobo · 2019-02-05T22:27:42Z

{
  "presets": [
    "razzle/babel",
    "stage-0"
  ],
  "plugins": ["optional-chaining"]
}

I'll update the module above to be more safe. Testing babelLoader.plugins before push should be sufficient.

kkarkos · 2019-02-05T22:36:09Z

Thanks, so there is no need to use "plugins": ["inline-react-svg"] in ".babelrc"? If I add ".plugin" manually:

if (babelLoader.hasOwnProperty('plugins')) { // add plugin to babel loader babelLoader.plugins.push(irs); } else { babelLoader.plugins = [irs]; }

I get error:
`Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

configuration.module.rules[2] has an unknown property 'plugins'. These properties are valid:
object { compiler?, enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, resolve?, resource?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }
-> A rule
`

Are plugins not part of babelLoader.use[0].options ?

jakobo · 2019-02-05T22:59:10Z

If you've got a custom .babelrc this should in theory work (though I think I went the razzle.config.js route because I was supporting babel 7 at the time)

{
  "presets": [
    "razzle/babel",
    "stage-0"
  ],
  "plugins": ['inline-react-svg', {
    svgo: {
      plugins: [
        { removeAttrs: { attrs: '(data-name)|(width)|(height)' }},
        { cleanupIDs: true }
      ]
    }
  }]
}

I also found the issue with the plugin above from extraction and will fix it.

Edit: see #881 (comment) for a working plugin in your razzle.config.js. It's based on the mdx pattern from the Razzle examples.

kkarkos · 2019-02-06T00:30:54Z

Thanks, yes - I'm also in the babel 7 boat. With custom .babelrc I run into this problem: (#912). And I don't want to use razzle alpha in production.

jakobo · 2019-02-06T01:37:26Z

@kkarkos I'd go with the plugin I revised above then: (#881 (comment))

I just brought up my dev server with that plugin and verified it worked, but let me know if you get any errors with it.

kkarkos · 2019-02-06T02:07:07Z

@jakobo Cheers! This brings up the following:

ERROR in ./src/client/index.js Module build failed (from ./node_modules/razzle/node_modules/babel-loader/lib/index.js): Error: Requires Babel "^7.0.0-0", but was loaded with "6.25.0". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.

Might be related to #912 but I removed "@babel/core": "^7.2.2", from package.json. So I'm using razzles "6.25.0". What version are you using this with?

kkarkos · 2019-02-06T03:40:50Z

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!

jlaustill · 2019-04-29T14:04:11Z

@jakobo have you wrapped this up into an npm module yet? If not, would you have any issues with me doing so if I gave you original author credit?

EDIT, this isn't working for me, I spoke to soon. Still getting this error on the server :(

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
^

SyntaxError: Unexpected token <
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)

jakobo · 2019-04-29T14:58:52Z

Before going on the hook for a plug-in, I'd consider upgrading to Razzle v3 which has Babel 7 support. Then it becomes a straightforward .babelrc plugin:

{
  "presets": [
    "razzle/babel"
  ],
  "plugins": [
    ["babel-plugin-inline-react-svg", {
      "svgo": {
        "plugins": [
          { "removeAttrs": { "attrs": "(data-name)|(width)|(height)" } },
          { "cleanupIDs": true }
        ]
      }
    }]
  ]
}

jimmyhedstr0m · 2019-05-06T07:26:42Z

Any ideas of how to solve this for TypeScript projects without babel?

jlaustill · 2019-05-06T13:11:57Z

Any ideas of how to solve this for TypeScript projects without babel?

My solution was to move all our svg's and png's to a cdn. This was they are only a url string server side. I couldn't get any of this to work using razzle 3 and babel 7, blah

jimmyhedstr0m · 2019-07-01T19:19:59Z

After doing some more attempts, I got svg-react-loader to work with TypeScript without Babel by importing the svg's this way:

import Logo from '!svg-react-loader?name=Icon!./react.svg';

to in the end use it like this:

<Logo className="Home-logo" />

This works, however in my opinion it doesn't feel like a solid solution. It feels like there is some internal Razzle implementation that collides with svg-react-loader.

DeviousM · 2019-10-09T14:40:07Z

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

youcanping · 2020-01-13T08:49:18Z

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

./src/components/Mypage/Invite/assets/step1.svg
NonErrorEmittedError: (Emitted value instead of an instance of Error) Error in parsing SVG: Non-whitespace before first tag.
Line: 0
Column: 1
Char: i

DeviousM · 2020-01-13T08:55:15Z

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
./src/components/Mypage/Invite/assets/step1.svg
NonErrorEmittedError: (Emitted value instead of an instance of Error) Error in parsing SVG: Non-whitespace before first tag.
Line: 0
Column: 1
Char: i

What is the content of the step1.svg file?

youcanping · 2020-01-13T08:59:35Z

正如你们中的一些人想要对Razzle的svgo支持一样，我创建了一个使用@ svgr / webpack的插件，它似乎可以正常工作（我自己在使用它 😄）。
https://www.npmjs.com/package/razzle-plugin-svgr
./src/components/Mypage/Invite/assets/step1.svg
NonErrorEmittedError: (Emitted value instead of an instance of Error) Error in parsing SVG: Non-whitespace before first tag.
Line: 0
Column: 1
Char: i
step1.svg文件的内容是什么？

<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
    <title>邀请好友</title>
    <desc>Created with Sketch.</desc>
    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="我的邀请" transform="translate(-607.000000, -189.000000)" fill="#2477F2">
            <g id="编组-6" transform="translate(600.000000, 154.000000)">
                <g id="邀请好友" transform="translate(0.000000, 28.000000)">
                    <g transform="translate(6.040000, 6.040000)" id="编组-3">
                        <g>
                            <g id="编组-7" transform="translate(2.000000, 2.000000)">
                                <circle id="椭圆形" cx="6.03" cy="3.015" r="3.015"></circle>
                                <path d="M6.03,7.035 C6.9743182,7.035 7.86793753,7.2520677 8.6636832,7.6390283 C7.09488591,8.49005141 6.03,10.150667 6.03,12.06 C6.03,13.2034274 6.41190636,14.2576557 7.05512025,15.1020863 L2.0360083,15.1010083 C0.962663617,15.1010083 0.0833082456,14.2704413 0.00558450245,13.2169497 L-2.27817765e-13,13.065 C-2.28225606e-13,9.73472296 2.69972296,7.035 6.03,7.035 Z" id="形状结合"></path>
                                <path d="M11.055,8.04 C13.2751847,8.04 15.075,9.83981531 15.075,12.06 C15.075,14.2801847 13.2751847,16.08 11.055,16.08 C8.83481531,16.08 7.035,14.2801847 7.035,12.06 C7.035,9.83981531 8.83481531,8.04 11.055,8.04 Z M12.4300343,10.3013339 C12.2912728,10.0609919 11.9839486,9.9786446 11.7436066,10.1174061 C11.5032645,10.2561677 11.4209173,10.5634919 11.5596788,10.8038339 L11.5596788,10.8038339 L12.2076318,11.925 L8.98513184,11.9254394 C8.70760875,11.9254394 8.48263184,12.1504163 8.48263184,12.4279394 C8.48263184,12.7054625 8.70760875,12.9304394 8.98513184,12.9304394 L8.98513184,12.9304394 L13.0051318,12.9304394 C13.2826549,12.9304394 13.5076318,12.7054625 13.5076318,12.4279394 C13.5076318,12.396378 13.5047221,12.3654961 13.5005832,12.3359935 C13.5091083,12.2370436 13.4884593,12.1345798 13.4350343,12.042045 L13.4350343,12.042045 Z" id="形状结合"></path>
                            </g>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

DeviousM · 2020-01-13T09:01:53Z

@youcanping - it might be that those special characters are not supported by SVGO, which is used by svgr.

Can you please try with that one?

<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g transform="translate(1.04 1.04)" fill="#2477F2" fill-rule="evenodd"><circle cx="6.03" cy="3.015" r="3.015"/><path d="M6.03 7.035c.9443 0 1.838.217 2.6337.604C7.0949 8.49 6.03 10.1507 6.03 12.06a5.003 5.003 0 001.0251 3.042l-5.019-.001c-1.0734 0-1.9528-.8306-2.0305-1.884L0 13.065c0-3.3303 2.6997-6.03 6.03-6.03z"/><path d="M11.055 8.04c2.2202 0 4.02 1.7998 4.02 4.02 0 2.2202-1.7998 4.02-4.02 4.02-2.2202 0-4.02-1.7998-4.02-4.02 0-2.2202 1.7998-4.02 4.02-4.02zm1.375 2.2613a.5025.5025 0 00-.8703.5025l.648 1.1212-3.2226.0004a.5025.5025 0 100 1.005h4.02a.5025.5025 0 00.5025-.5025.6623.6623 0 00-.007-.092.5002.5002 0 00-.0656-.2939z"/></g></svg>

youcanping · 2020-01-13T09:02:52Z

@youcanping - svgr使用的SVGO可能不支持这些特殊字符。

你能试试那个吗？

<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g transform="translate(1.04 1.04)" fill="#2477F2" fill-rule="evenodd"><circle cx="6.03" cy="3.015" r="3.015"/><path d="M6.03 7.035c.9443 0 1.838.217 2.6337.604C7.0949 8.49 6.03 10.1507 6.03 12.06a5.003 5.003 0 001.0251 3.042l-5.019-.001c-1.0734 0-1.9528-.8306-2.0305-1.884L0 13.065c0-3.3303 2.6997-6.03 6.03-6.03z"/><path d="M11.055 8.04c2.2202 0 4.02 1.7998 4.02 4.02 0 2.2202-1.7998 4.02-4.02 4.02-2.2202 0-4.02-1.7998-4.02-4.02 0-2.2202 1.7998-4.02 4.02-4.02zm1.375 2.2613a.5025.5025 0 00-.8703.5025l.648 1.1212-3.2226.0004a.5025.5025 0 100 1.005h4.02a.5025.5025 0 00.5025-.5025.6623.6623 0 00-.007-.092.5002.5002 0 00-.0656-.2939z"/></g></svg>

ok,i try it

youcanping · 2020-01-13T09:09:56Z

@youcanping -svgr使用的SVGO可能不支持这些特殊字符。
你能试试那个吗？

<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g transform="translate(1.04 1.04)" fill="#2477F2" fill-rule="evenodd"><circle cx="6.03" cy="3.015" r="3.015"/><path d="M6.03 7.035c.9443 0 1.838.217 2.6337.604C7.0949 8.49 6.03 10.1507 6.03 12.06a5.003 5.003 0 001.0251 3.042l-5.019-.001c-1.0734 0-1.9528-.8306-2.0305-1.884L0 13.065c0-3.3303 2.6997-6.03 6.03-6.03z"/><path d="M11.055 8.04c2.2202 0 4.02 1.7998 4.02 4.02 0 2.2202-1.7998 4.02-4.02 4.02-2.2202 0-4.02-1.7998-4.02-4.02 0-2.2202 1.7998-4.02 4.02-4.02zm1.375 2.2613a.5025.5025 0 00-.8703.5025l.648 1.1212-3.2226.0004a.5025.5025 0 100 1.005h4.02a.5025.5025 0 00.5025-.5025.6623.6623 0 00-.007-.092.5002.5002 0 00-.0656-.2939z"/></g></svg>

好的，我试试看

Okay, the problem is that the configuration I added earlier has not been removed

appConfig.module.rules.push({
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
            use: [
                {
                    loader: "babel-loader"
                },
                {
                    loader: "@svgr/webpack",
                    options: {
                        babel: false,
                        icon: true
                    }
                }
            ]
        });

DeviousM · 2020-01-13T09:11:46Z

@youcanping - that makes sense as two svgr's were colliding I guess 😉

youcanping · 2020-01-13T09:17:08Z

@youcanping - that makes sense as two svgr's were colliding I guess 😉

@svgr/webpack is not work
Thank you very much for the plug-in that solved my problem

kkarkos mentioned this issue Feb 6, 2019

.babelrc - Requires Babel "^7.0.0-0", but was loaded with "6.25.0" error #912

Closed

stale bot added the stale label Apr 7, 2019

stale bot removed the stale label Apr 29, 2019

stale bot added the stale label Aug 30, 2019

stale bot removed the stale label Oct 9, 2019

stale bot added the stale label Dec 8, 2019

stale bot removed the stale label Jan 13, 2020

nimaa77 closed this as completed Mar 17, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Invariant Violation: Invalid tag for SVG #881

Invariant Violation: Invalid tag for SVG #881

Rahul-Sagore commented Jan 8, 2019

Rahul-Sagore commented Jan 9, 2019 •

edited

Loading

sergeyromanovsky commented Feb 4, 2019 •

edited

Loading

jakobo commented Feb 4, 2019 •

edited

Loading

kkarkos commented Feb 5, 2019

jakobo commented Feb 5, 2019

kkarkos commented Feb 5, 2019 •

edited

Loading

jakobo commented Feb 5, 2019 •

edited

Loading

kkarkos commented Feb 6, 2019

jakobo commented Feb 6, 2019

kkarkos commented Feb 6, 2019

kkarkos commented Feb 6, 2019

jlaustill commented Apr 29, 2019 •

edited

Loading

jakobo commented Apr 29, 2019

jimmyhedstr0m commented May 6, 2019

jlaustill commented May 6, 2019

jimmyhedstr0m commented Jul 1, 2019

DeviousM commented Oct 9, 2019 •

edited

Loading

youcanping commented Jan 13, 2020

DeviousM commented Jan 13, 2020

youcanping commented Jan 13, 2020

DeviousM commented Jan 13, 2020

youcanping commented Jan 13, 2020

youcanping commented Jan 13, 2020

DeviousM commented Jan 13, 2020

youcanping commented Jan 13, 2020

Invariant Violation: Invalid tag for SVG #881

Invariant Violation: Invalid tag for SVG #881

Comments

Rahul-Sagore commented Jan 8, 2019

Rahul-Sagore commented Jan 9, 2019 • edited Loading

sergeyromanovsky commented Feb 4, 2019 • edited Loading

jakobo commented Feb 4, 2019 • edited Loading

kkarkos commented Feb 5, 2019

jakobo commented Feb 5, 2019

kkarkos commented Feb 5, 2019 • edited Loading

jakobo commented Feb 5, 2019 • edited Loading

kkarkos commented Feb 6, 2019

jakobo commented Feb 6, 2019

kkarkos commented Feb 6, 2019

kkarkos commented Feb 6, 2019

jlaustill commented Apr 29, 2019 • edited Loading

jakobo commented Apr 29, 2019

jimmyhedstr0m commented May 6, 2019

jlaustill commented May 6, 2019

jimmyhedstr0m commented Jul 1, 2019

DeviousM commented Oct 9, 2019 • edited Loading

youcanping commented Jan 13, 2020

DeviousM commented Jan 13, 2020

youcanping commented Jan 13, 2020

DeviousM commented Jan 13, 2020

youcanping commented Jan 13, 2020

youcanping commented Jan 13, 2020

DeviousM commented Jan 13, 2020

youcanping commented Jan 13, 2020

Rahul-Sagore commented Jan 9, 2019 •

edited

Loading

sergeyromanovsky commented Feb 4, 2019 •

edited

Loading

jakobo commented Feb 4, 2019 •

edited

Loading

kkarkos commented Feb 5, 2019 •

edited

Loading

jakobo commented Feb 5, 2019 •

edited

Loading

jlaustill commented Apr 29, 2019 •

edited

Loading

DeviousM commented Oct 9, 2019 •

edited

Loading