search

facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.68k stars 26.84k forks source link

Bug: [5.0] SVGs cannot be imported (not as components, but regular import) #11770

Open alamothe opened 2 years ago

alamothe commented 2 years ago

Describe the bug

When importing a SVG in a regular manner (not as a component):

import Logo from './logo.svg'

There is an error upon yarn start:

SyntaxError: unknown: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.

This seems like a regression from CRA 4 which didn't have this problem. I understand the error is relevant if I tried to import it as a component, but that's not what's happening here.

Did you try recovering your dependencies?

yes

Which terms did you search for in User Guide?

SyntaxError: unknown: Namespace tags are not supported by default

Environment

Environment Info:

  current version of create-react-app: 4.0.3
  running from /Users/alamothe/.config/yarn/global/node_modules/create-react-app

  System:
    OS: macOS 11.6.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 14.18.2 - /usr/local/opt/node@14/bin/node
    Yarn: 3.2.0-rc.7 - /usr/local/bin/yarn
    npm: 6.14.15 - /usr/local/opt/node@14/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Edge: 96.0.1054.53
    Firefox: 94.0.2
    Safari: 15.1
  npmPackages:
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    react-scripts: 5.0.0 => 5.0.0 
  npmGlobalPackages:
    create-react-app: 4.0.3
  1. Import SVG file 
    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW 2021 (64-Bit) -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="725px" height="144px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 311.23 61.63"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<path fill="blue" fill-rule="nonzero" d="M148.94 61.63c-4.76,0 -9.08,-1.93 -12.2,-5.06 -3.13,-3.12 -5.06,-7.43 -5.06,-12.2l0 0 0 -17.03 -5.53 0c-1.82,0 -3.3,-1.48 -3.3,-3.29 0,-1.82 1.48,-3.29 3.3,-3.29l5.53 0 0 -17.47c0,-1.82 1.47,-3.29 3.29,-3.29 1.82,0 3.29,1.47 3.29,3.29l0 17.47 5.54 0 0 6.58 -5.54 0 0 17.03 0 0.01c0.01,2.94 1.2,5.61 3.13,7.54 1.93,1.93 4.6,3.13 7.55,3.13l0 6.58zm-30.06 -6.03c-1.91,1.92 -4.19,3.43 -6.68,4.46 -2.49,1.03 -5.15,1.57 -7.86,1.57 -5.69,0 -10.83,-2.3 -14.55,-6.03 -2.93,-2.92 -4.98,-6.73 -5.72,-10.98l-27.83 0c0.64,2.43 1.91,4.61 3.64,6.33 2.53,2.53 6.03,4.1 9.89,4.1 1.87,0 3.7,-0.37 5.37,-1.06 1.66,-0.69 3.2,-1.71 4.52,-3.04l4.66 4.65c-1.92,1.92 -4.2,3.43 -6.69,4.46 -2.48,1.03 -5.15,1.57 -7.86,1.57 -5.68,0 -10.82,-2.3 -14.55,-6.03 -3.62,-3.62 -5.9,-8.59 -6.02,-14.08 0,-0.07 0,-0.13 0,-0.19 0,-0.05 0,-0.09 0,-0.14 0,-0.04 0,-0.09 0,-0.13l0 0c0.07,-5.58 2.36,-10.61 6.02,-14.28 3.73,-3.72 8.87,-6.02 14.55,-6.02 5.68,0 10.82,2.3 14.55,6.02 1.02,1.03 1.94,2.16 2.73,3.38 0.79,-1.22 1.71,-2.35 2.74,-3.38 3.72,-3.72 8.86,-6.02 14.55,-6.02 5.68,0 10.82,2.3 14.54,6.02 3.73,3.73 6.03,8.87 6.03,14.55 0,1.82 -1.47,3.29 -3.29,3.29l-30.82 0c0.64,2.43 1.92,4.61 3.64,6.33 2.53,2.53 6.03,4.1 9.9,4.1 1.87,0 3.69,-0.37 5.36,-1.06 1.66,-0.69 3.21,-1.71 4.53,-3.04l4.65 4.65zm-14.54 -17.56l13.6 0c-0.61,-2.54 -1.92,-4.82 -3.71,-6.6 -2.53,-2.54 -6.03,-4.1 -9.89,-4.1 -3.87,0 -7.37,1.56 -9.9,4.1 -1.79,1.78 -3.09,4.06 -3.71,6.6l13.61 0zm-34.57 0l13.6 0c-0.61,-2.54 -1.92,-4.82 -3.71,-6.6 -2.53,-2.54 -6.03,-4.1 -9.89,-4.1 -3.86,0 -7.36,1.56 -9.89,4.1 -1.79,1.78 -3.1,4.06 -3.71,6.6l13.6 0zm-60.94 -10.7l-5.54 0c-1.82,0 -3.29,-1.48 -3.29,-3.29 0,-1.82 1.47,-3.29 3.29,-3.29l5.54 0 0 -3.5 0 0c0,-4.76 1.93,-9.08 5.05,-12.2 3.13,-3.13 7.44,-5.06 12.21,-5.06l0 6.58c-2.95,0 -5.62,1.2 -7.55,3.13 -1.93,1.93 -3.13,4.6 -3.13,7.54l0 0.01 0 3.5 5.54 0 0 6.58 -5.54 0 0 31c0,1.82 -1.47,3.29 -3.29,3.29 -1.82,0 -3.29,-1.47 -3.29,-3.29l0 -31zm23.02 -24.05c0,-1.82 1.48,-3.29 3.29,-3.29 1.82,0 3.29,1.47 3.29,3.29l0 41.08 0 0.01c0.01,2.94 1.2,5.61 3.13,7.54 1.93,1.93 4.6,3.13 7.55,3.13l0 6.58c-4.76,0 -9.08,-1.93 -12.2,-5.06 -3.13,-3.12 -5.06,-7.43 -5.06,-12.2l0 0 0 -41.08z"/>
<path fill="#001737" fill-rule="nonzero" d="M170.59 15.87c3.01,0 5.66,0.67 7.94,2 2.29,1.34 4.08,3.07 5.37,5.2 0.27,0.42 0.4,0.88 0.4,1.37 0,0.73 -0.34,1.3 -1.03,1.72 -0.3,0.15 -0.65,0.23 -1.03,0.23 -0.41,0 -0.81,-0.11 -1.17,-0.32 -0.36,-0.21 -0.65,-0.5 -0.88,-0.88 -2.14,-3.36 -5.35,-5.05 -9.66,-5.09 -3.08,0 -5.52,0.65 -7.31,1.94 -1.79,1.3 -2.68,3.15 -2.68,5.55 0,4.45 3.6,7.15 10.79,8.11 4.73,0.68 8.25,2.13 10.57,4.34 2.32,2.21 3.49,5.12 3.49,8.74 0,2.66 -0.65,4.97 -1.95,6.91 -1.29,1.94 -3.06,3.42 -5.31,4.43 -2.25,1.01 -4.76,1.51 -7.54,1.51 -3.62,0 -6.83,-0.77 -9.62,-2.31 -2.8,-1.54 -4.81,-3.63 -6.03,-6.26 -0.15,-0.26 -0.23,-0.57 -0.23,-0.91 0,-0.53 0.2,-0.98 0.6,-1.34 0.4,-0.37 0.94,-0.55 1.63,-0.55 0.45,0 0.88,0.13 1.28,0.37 0.4,0.25 0.7,0.6 0.89,1.06 0.87,1.71 2.33,3.1 4.37,4.14 2.04,1.05 4.41,1.57 7.11,1.57 3.12,0 5.64,-0.75 7.54,-2.25 1.91,-1.51 2.86,-3.61 2.86,-6.32 0,-2.39 -0.89,-4.41 -2.66,-6.05 -1.77,-1.64 -4.43,-2.69 -7.97,-3.14 -4.42,-0.54 -7.89,-1.92 -10.42,-4.14 -2.54,-2.23 -3.8,-4.96 -3.8,-8.2 0,-2.29 0.62,-4.29 1.85,-6.03 1.24,-1.73 2.96,-3.06 5.15,-4 2.19,-0.93 4.67,-1.4 7.45,-1.4zm52.04 0.58c0.57,0 1.04,0.2 1.4,0.6 0.36,0.39 0.54,0.88 0.54,1.45 0,0.54 -0.13,1.01 -0.4,1.43l-15.59 24.62 0 14.28c0,0.61 -0.21,1.13 -0.63,1.57 -0.42,0.44 -0.95,0.66 -1.6,0.66 -0.61,0 -1.13,-0.22 -1.57,-0.66 -0.44,-0.44 -0.66,-0.96 -0.66,-1.57l0 -14.28 -15.54 -24.62c-0.3,-0.49 -0.45,-0.97 -0.45,-1.43 0,-0.57 0.21,-1.06 0.63,-1.45 0.41,-0.4 0.93,-0.6 1.54,-0.6 0.42,0 0.77,0.08 1.06,0.25 0.28,0.17 0.56,0.45 0.82,0.83l14.23 22.91 14.16 -22.79c0.31,-0.42 0.61,-0.73 0.92,-0.92 0.3,-0.19 0.68,-0.28 1.14,-0.28zm40.33 2.22c0,-0.64 0.22,-1.18 0.66,-1.6 0.43,-0.42 0.96,-0.62 1.57,-0.62 0.65,0 1.18,0.2 1.6,0.62 0.42,0.42 0.63,0.96 0.63,1.6l0 40.16c0,0.61 -0.21,1.13 -0.63,1.57 -0.42,0.44 -0.95,0.66 -1.6,0.66 -0.76,0 -1.32,-0.25 -1.66,-0.74l-27.36 -35.88 0 34.39c0,0.61 -0.21,1.13 -0.63,1.57 -0.42,0.44 -0.95,0.66 -1.6,0.66 -0.65,0 -1.18,-0.21 -1.6,-0.63 -0.42,-0.42 -0.63,-0.95 -0.63,-1.6l0 -40.16c0,-0.64 0.21,-1.18 0.63,-1.6 0.42,-0.42 0.95,-0.62 1.6,-0.62 0.69,0 1.26,0.26 1.71,0.8l27.31 35.87 0 -34.45zm33.65 -2.8c2.74,0 5.23,0.4 7.48,1.2 2.25,0.8 4.42,2.08 6.51,3.83 0.42,0.31 0.63,0.74 0.63,1.32 0,0.3 -0.08,0.58 -0.23,0.82 -0.15,0.25 -0.36,0.43 -0.63,0.55 -0.07,0.26 -0.24,0.47 -0.51,0.62 -0.27,0.16 -0.55,0.23 -0.86,0.23 -0.57,0 -1.04,-0.17 -1.43,-0.51 -1.48,-1.33 -3.1,-2.31 -4.85,-2.91 -1.75,-0.61 -3.79,-0.92 -6.11,-0.92 -3.2,0 -6.17,0.85 -8.91,2.54 -2.75,1.7 -4.93,3.97 -6.55,6.83 -1.61,2.86 -2.42,5.94 -2.42,9.25 0,3.39 0.8,6.52 2.4,9.37 1.6,2.86 3.77,5.12 6.51,6.8 2.74,1.68 5.73,2.51 8.97,2.51 4.15,0 7.9,-1.33 11.25,-4 0.42,-0.3 0.84,-0.45 1.26,-0.45 0.57,0 1.06,0.2 1.48,0.6 0.42,0.4 0.63,0.92 0.63,1.57 0,0.61 -0.21,1.14 -0.63,1.6 -3.58,3.27 -8.24,4.91 -13.99,4.91 -4.04,0 -7.75,-1.03 -11.14,-3.08 -3.39,-2.06 -6.09,-4.84 -8.09,-8.34 -1.99,-3.51 -2.99,-7.33 -2.99,-11.49 0,-4.11 0.99,-7.92 2.97,-11.42 1.98,-3.5 4.66,-6.28 8.05,-8.34 3.39,-2.06 7.12,-3.09 11.2,-3.09z"/>
</g>
</svg>

The expected behavior

Lie in CRA4, there shouldn't be an error.

mikegoatly commented 2 years ago

Does this import work?

import { ReactComponent as Logo } from "./Logo.svg";
mikegoatly commented 2 years ago

I should add that importing { ReactComponent as x} is the approach I've always taken, based on the documentation for importing SVGs

bwaldvogel commented 2 years ago

The same error happens for me even when importing with { ReactComponent as x}.

I’ve tried to minimize my SVG file with scour but the import still fails.

ehardesty commented 2 years ago

I am also unable to use an SVG import with { ReactComponent as x } or a regular direct import.

My SVG contains CDATA which resulted in this error: Module build failed (from ./node_modules/@svgr/webpack/lib/index.js): Error: Expected node, got followed by a large block of CDATA.

Removing the CDATA block from the SVG file resulted in the same error @alamothe reported.

rodrigograca31 commented 2 years ago

I was using one of the unDraw SVGs and got this error.

But I noticed that I modified it using Inkscape and the modified version wasn't working but the original version downloaded from the site worked.

So I took a look at the files and saw that the original one was way more compressed/compact so I decided to take the one that wasn't working and compress it and see if that worked. It works!

Potential solution:

Compress your SVGs using this site

It worked for me. After compressing it using the site (default settings) I stopped having this error. And saved a few bytes!

:+1: if it works for you!

alamothe commented 2 years ago

Guys, if possible let's keep this bug for regular import:

import Logo from './logo.svg'

This is quite different than importing as a component (both have different trade-offs).

For regular import, CRA shouldn't be trying to make it as a component in the first place, it is to be used inside img tag.

JC03Ceige commented 2 years ago

Same issue. Is there a possible fix yet?

rodrigograca31 commented 2 years ago

Same issue. Is there a possible fix yet?

I provided 1 above. it might work for you. read up

matburnham commented 2 years ago

Same issue. Is there a possible fix yet?

I used svgo as a node CLI workaround.

Did the trick for me. YMMV.

JC03Ceige commented 2 years ago

Same issue. Is there a possible fix yet?

I provided 1 above. it might work for you. read up

Thanks, it worked like a charm!

konradekk commented 2 years ago

Quickest way to temporarily workaround this bug is to reconfigure the import itself in the fly taking advantage of webpack being used under the hood.

I won’t go into detail of the technique; please refer for webpack config docs for the details and possible other variants of the change. (You could go even for something more wholesome like CRA overrides based on this etc.)

🏃‍♂️ TL;DR (example)

Instead of

import Logo from "./logo.svg";

you should just use

import Logo from "!file-loader!./logo.svg";

(’till the bug is resolved).

 

⚠ Warning (Jest)

See @mykter answer below for solving possible issues with Jest.

N00nDay commented 2 years ago

None of the solutions above worked for me. I am using animated SVG's which may be a different issue all together.

jasperdunn commented 2 years ago

I have this issue too

gnewfield commented 2 years ago

I fixed this issue by modifying the naming scheme of the attributes within the svg file to camel case. For example:

After resolving this syntax error, the importing { ReactComponent as x} approach mentioned above successfully rendered the svg. For reference, the fix can be found originally on this StackOverflow answer.

OneAirOne commented 2 years ago

I was using one of the unDraw SVGs and got this error.

But I noticed that I modified it using Inkscape and the modified version wasn't working but the original version downloaded from the site worked.

So I took a look at the files and saw that the original one was way more compressed/compact so I decided to take the one that wasn't working and compress it and see if that worked. It works!

Potential solution:

Compress your SVGs using this site

It worked for me. After compressing it using the site (default settings) I stopped having this error. And saved a few bytes!

👍 if it works for you!

Same issue, work for me ! Thanks

emma-r-slight commented 2 years ago

I was using one of the unDraw SVGs and got this error. But I noticed that I modified it using Inkscape and the modified version wasn't working but the original version downloaded from the site worked. So I took a look at the files and saw that the original one was way more compressed/compact so I decided to take the one that wasn't working and compress it and see if that worked. It works!

Potential solution:

Compress your SVGs using this site It worked for me. After compressing it using the site (default settings) I stopped having this error. And saved a few bytes! 👍 if it works for you!

Same issue, work for me ! Thanks

This worked perfectly for me!! Thank you!!

Avivhdr commented 2 years ago

Is it a viable solution to manually change the content of the SVG files? I have over 100 SVGs in my assets folder. Changing them one by one is not an option in my case.

matburnham commented 2 years ago

Is it a viable solution to manually change the content of the SVG files? I have over 100 SVGs in my assets folder. Changing them one by one is not an option in my case.

svgo runs from the command line. It will process multiple files. It's not a solution, but a viable workaround.

Rafael-Ramblas commented 2 years ago

SVGO didn't worked for me, but the import with file-loader did the trick

fehergeri13 commented 2 years ago

I accidentally excluded the react-app-env.d.ts file from my repo. Adding it back solved my issues with svg files.

Poyoman39 commented 2 years ago

For those trying svgo solution try run svgo -r . from root of your project.

apurvjain28 commented 2 years ago

https://www.svgminify.com/ works for me too!

mykter commented 2 years ago

If you're using the import Logo from "!file-loader!./logo.svg"; workaround and are using Jest for tests, you might get an error like: Cannot find module '!file-loader!./logo.svg' from ...

To avoid this you can mock out static assets in your tests as described here: https://jestjs.io/docs/webpack

hichemfantar commented 2 years ago

The maintainer can probably allow us to configure this behavior by turning it on and off using environment variables. https://create-react-app.dev/docs/advanced-configuration/ Please allow us to configure this.

fix-me commented 2 years ago

Quickest way to temporarily workaround this bug is to reconfigure the import itself in the fly taking advantage of webpack being used under the hood.

I won’t go into detail of the technique; please refer for webpack config docs for the details and possible other variants of the change. (You could go even for something more wholesome like CRA overrides based on this etc.)

🏃‍♂️ TL;DR (example) Instead of

import Logo from "./logo.svg";

you should just use

import Logo from "!file-loader!./logo.svg";

(’till the bug is resolved).

 

⚠ Warning (Jest) See @mykter answer below for solving possible issues with Jest.

Doesn't work!

Unexpected '!' in '!file-loader!../../assets/header.svg'. Do not use import syntax to configure webpack loaders

Also when running tests:

Cannot find module '!file-loader!../../assets/header.svg' from 'src/main.ts'

mykter commented 2 years ago

@fix-me for the first issue you can suppress the ESLint error with a comment like // eslint-disable-next-line prior to the import.

For the test issue, see the link in the text you quoted: https://github.com/facebook/create-react-app/issues/11770#issuecomment-1068117768

AndreiPisica commented 2 years ago

I can t believe people are still looking for inappropriate workarounds for this bug. This needs to be fixed and while a fix is done you can downgrade react scripts for a while.

hichemfantar commented 2 years ago

There are two solutions: A: Rollback to react-scripts 4.0.3 and react-error-overlay 6.0.9 B: Switch to Nextjs tooling, https://colinhacks.com/essays/building-a-spa-with-nextjs https://nextjs.org/docs/advanced-features/static-html-export

fix-me commented 2 years ago

There are two solutions: A: Rollback to react-scripts 4.0.3 and react-error-overlay 6.0.9 B: Switch to Nextjs tooling, https://colinhacks.com/essays/building-a-spa-with-nextjs

These are not really solutions, since the no longer maintained version is not passing WhiteSource anymore and Azure is moving forward dropping support for node < 14 soon. Switching to another framework for a 100k lines of code thing is also not an option, sry.

hichemfantar commented 2 years ago

There are two solutions: A: Rollback to react-scripts 4.0.3 and react-error-overlay 6.0.9 B: Switch to Nextjs tooling, https://colinhacks.com/essays/building-a-spa-with-nextjs

These are not really solutions, since the no longer maintained version is not passing WhiteSource anymore and Azure is moving forward dropping support for node < 14 soon. Switching to another framework for a 100k lines of code thing is also not an option, sry.

The second solution doesn't change the code, you can add an spa entrypoint to nextjs and it will treat it like a pure spa.

fix-me commented 2 years ago

This ticket is open for four months. Is there any progress from official side to expect?

Thank you!

alamothe commented 2 years ago

Zero progress on 5.0.1 since 5.0.0 was out, unfortunately.

luiso1979 commented 2 years ago

Are there any news regarding this issue with react-scripts > 4.0.3 ?

I use several SVGs and animated SVGs, for me is enough to import them as an img (not as a reactComponent).

Thanks in advance. Luis

pitops commented 2 years ago

For me, i had issue with animating svgs, that i was importing and using like this

import MastHeadSVG from './assets/MastHead.svg'

export const MastHead = () => {
  return (
    <Root>
      <object type='image/svg+xml' data={MastHeadSVG}>
        Masthead animation
      </object>
    </Root>
  )
}

What worked was to have a yarn resolution for @svgr.webpack at version 6.2.1. Reason is that react-scripts is using version 5.*.* and some aspects of the animation were not supported from what i gathered

in package.json

  "resolutions": {
    "@svgr/webpack": "6.2.1"
  },

You need to remove node_modules and re-install again

Hope that helps someone

fix-me commented 2 years ago

For me, i had issue with animating svgs, that i was importing and using like this

import MastHeadSVG from './assets/MastHead.svg'

export const MastHead = () => {
  return (
    <Root>
      <object type='image/svg+xml' data={MastHeadSVG}>
        Masthead animation
      </object>
    </Root>
  )
}

What worked was to have a yarn resolution for @svgr.webpack at version 6.2.1. Reason is that react-scripts is using version 5.*.* and some aspects of the animation were not supported from what i gathered

in package.json

  "resolutions": {
    "@svgr/webpack": "6.2.1"
  },

You need to remove node_modules and re-install again

Hope that helps someone

That sounds promising so far, thank you! I will give it a try. I didn't think about adding some resolutions. Maybe it can be addressed to the maintainers to use the proper version?

DinarSharipov commented 2 years ago

it didn't work for me

RaphaelMechali commented 2 years ago

for me neither

pitops commented 2 years ago

just for additional info, you might need to remove the previous node_modules and maybe the .lock file for the resolution to work

aiden-sobey commented 2 years ago

Seems like this is a common issue, being able to use SVGs should be assured functionality. Is there something behind the scenes that is blocking this from being worked on?

maxencelaurent commented 2 years ago

Not sure if it's relevant as I do not use create-react-app, but I came across this problem earlier and solved it.

In short, my setup uses webpack and is configured to load SVGs with `@svgr/webpack' (default settings).

This morning, I made some tests with the svgo CLI. In that purpose, I have created a svgo.config.js file in my home directory.

From then, building my react app fails with the Namespace tags are not supported by default. error.

The point is @svgr/webpack uses the config file from my home directory instead of its own svgo config.

My ~/svgo.config.js file was like

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

Renaming my svgo.config.js file to my_svgo.config.js solved the problem.

fix-me commented 2 years ago

Not sure if it's relevant as I do not use create-react-app, but I came across this problem earlier and solved it.

In short, my setup uses webpack and is configured to load SVGs with `@svgr/webpack' (default settings).

This morning, I made some tests with the svgo CLI. In that purpose, I have created a svgo.config.js file in my home directory.

From then, building my react app fails with the Namespace tags are not supported by default. error.

The point is @svgr/webpack uses the config file from my home directory instead of its own svgo config.

My ~/svgo.config.js file was like

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

Renaming my svgo.config.js file to my_svgo.config.js solved the problem.

The config files are capsuled by react-scripts and you normally don't need to adjust them.

fix-me commented 2 years ago

it didn't work for me

I think the suggestion using resolution / overrides as stated here https://github.com/facebook/create-react-app/issues/11770#issuecomment-1114173305 only works with npm version 8+ which is part of node 16+. Unfortunately we have node 14 in our project, so this is also no option for us yet. But this thing is interesting and powerful to force updates for nested dependencies of unmaintained / deprecated libraries.

fix-me commented 2 years ago

I hope 5.0.2 with a fix will be released soon 🥴 The feature branch is stall and this is really needed for production to fix react-scripts 4 dependency check with evidence count > 11

VILLAN3LL3 commented 2 years ago

For me, i had issue with animating svgs, that i was importing and using like this

import MastHeadSVG from './assets/MastHead.svg'

export const MastHead = () => {
  return (
    <Root>
      <object type='image/svg+xml' data={MastHeadSVG}>
        Masthead animation
      </object>
    </Root>
  )
}

What worked was to have a yarn resolution for @svgr.webpack at version 6.2.1. Reason is that react-scripts is using version 5.*.* and some aspects of the animation were not supported from what i gathered in package.json

  "resolutions": {
    "@svgr/webpack": "6.2.1"
  },

You need to remove node_modules and re-install again

Hope that helps someone

That sounds promising so far, thank you! I will give it a try. I didn't think about adding some resolutions. Maybe it can be addressed to the maintainers to use the proper version?

For me, i had issue with animating svgs, that i was importing and using like this

import MastHeadSVG from './assets/MastHead.svg'

export const MastHead = () => {
  return (
    <Root>
      <object type='image/svg+xml' data={MastHeadSVG}>
        Masthead animation
      </object>
    </Root>
  )
}

What worked was to have a yarn resolution for @svgr.webpack at version 6.2.1. Reason is that react-scripts is using version 5.*.* and some aspects of the animation were not supported from what i gathered

in package.json

  "resolutions": {
    "@svgr/webpack": "6.2.1"
  },

You need to remove node_modules and re-install again

Hope that helps someone

Works for me with npm overrides 

 "overrides": {
    "@svgr/webpack": "6.2.1"
  },
fix-me commented 2 years ago

For me, i had issue with animating svgs, that i was importing and using like this

import MastHeadSVG from './assets/MastHead.svg'

export const MastHead = () => {
  return (
    <Root>
      <object type='image/svg+xml' data={MastHeadSVG}>
        Masthead animation
      </object>
    </Root>
  )
}

What worked was to have a yarn resolution for @svgr.webpack at version 6.2.1. Reason is that react-scripts is using version 5.*.* and some aspects of the animation were not supported from what i gathered in package.json

  "resolutions": {
    "@svgr/webpack": "6.2.1"
  },

You need to remove node_modules and re-install again

Hope that helps someone

That sounds promising so far, thank you! I will give it a try. I didn't think about adding some resolutions. Maybe it can be addressed to the maintainers to use the proper version?

For me, i had issue with animating svgs, that i was importing and using like this

import MastHeadSVG from './assets/MastHead.svg'

export const MastHead = () => {
  return (
    <Root>
      <object type='image/svg+xml' data={MastHeadSVG}>
        Masthead animation
      </object>
    </Root>
  )
}

What worked was to have a yarn resolution for @svgr.webpack at version 6.2.1. Reason is that react-scripts is using version 5.*.* and some aspects of the animation were not supported from what i gathered in package.json

  "resolutions": {
    "@svgr/webpack": "6.2.1"
  },

You need to remove node_modules and re-install again

Hope that helps someone

Works for me with npm overrides

 "overrides": {
    "@svgr/webpack": "6.2.1"
  },

these require node 16+ with npm 8+

JoshMcCullough commented 2 years ago

Is it a viable solution to manually change the content of the SVG files? I have over 100 SVGs in my assets folder. Changing them one by one is not an option in my case.

Thank you! Everyone's talking about modifying the SVG itself which to "fix the problem" rather than talking about why we need to do this now? I don't want to have to manage my SVGs as JSX documents!

konradekk commented 2 years ago

Possible solution in the way: #12646. Kudos to @lucabattistini! 🙇‍♂️

fix-me commented 1 year ago

We got it fixed by modifying the webpack configuration with react-scripts-rewired and passing the svg through the babel loader before svgr webpack and file loader.

aprilmintacpineda commented 1 year ago

Still an issue for us, trying to migrate from v4 to v5. It seems that svgr does not transform SVG files to react component properly, it retains xmlns:dc and the likes rather than changing them to the corresponding prop name. This seems to be a tricky thing to do though.

adueck commented 1 year ago

Any word on #12646 getting merged and 5.0.2 being released. This is really too bad because I would really like to upgrade to 5 but this is breaking my workflow.

I agree with @JoshMcCullough above!

Is it a viable solution to manually change the content of the SVG files? I have over 100 SVGs in my assets folder. Changing them one by one is not an option in my case.

Thank you! Everyone's talking about modifying the SVG itself which to "fix the problem" rather than talking about why we need to do this now? I don't want to have to manage my SVGs as JSX documents!