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.

wmitsuda 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!

Looking at this repo activity it seems this project is abandoned. Too bad no public statement is made and that gives people hopes about a solution.

I've successfully migrated from CRA to vite months ago, it went smoothly and everything works nice. Made it in one afternoon. I recommend doing the same.

JosephBerm commented 1 year ago

Hello all, I'm trying to use an SVG from SVGator in my react project but keep coming across the following error:

Module build failed (from ./node_modules/react-scripts/node_modules/@svgr/webpack/lib/index.js): Error: Expected node, got J

I read through this thread but see no conclusive solution. Has anyone been able to find a fix to this?

The SVG File has the following:

<svg id="eDWYMRjh2Sd1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
   viewBox="0 0 640 480" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
   <polygon points="65.75,22.72 34.25,22.72 18.5,50 34.25,77.28 65.75,77.28 81.5,50 65.75,22.72"
      transform="matrix(1.139208 0 0 1.139208 263.0396 183.0396)" fill="#64ffda" fill-opacity="0"
      stroke="#64ffda" stroke-width="2.5" />
   <text dx="0" dy="0" font-family="&quot;Roboto&quot;" font-size="50" font-weight="400"
      transform="translate(306.205945 257.510468)" fill="#64ffda" stroke-width="0">
      <tspan y="0" font-weight="400" stroke-width="0"><![CDATA[J]]></tspan>
   </text>
</svg>

The error goes away when I remove <![CDATA[j]]>

torrinworx commented 1 year 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!

This ended up working for me, had the same issue on version 18.2.0: 

Module build failed (from ./node_modules/@svgr/webpack/lib/index.js):
SyntaxError: unknown file: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
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!

Looking at this repo activity it seems this project is abandoned. Too bad no public statement is made and that gives people hopes about a solution.

I've successfully migrated from CRA to vite months ago, it went smoothly and everything works nice. Made it in one afternoon. I recommend doing the same.

Yes, thanks @wmitsuda, I also migrated to Vite. It's great!

Bat-Sheva-Sh commented 1 year ago

what is wrong in this code-\ it gives an error of ### react-dom.development.js:16317 Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

`import logo from './logo.svg'; import './App.css'; import Login from './components/Login'; import Enroll from './components/Enroll'; import Home from './components/Home'; import react, { useState } from 'react';

function App() { const [isLogin, setIsLogin] = useState(false); const [isEnroll, setIsEnroll] = useState(false); const [isOld, setIsOld] = useState(""); const [isOld2, setIsOld2] = useState("");

setIsOld(localStorage.getItem('password'))//if you have anything in local
setIsOld2(localStorage.getItem('name'))

return (

); }

export default App;`

Bat-Sheva-Sh commented 1 year ago

this is the return in was droped

return (

);

Bat-Sheva-Sh commented 1 year ago

again..

aiden-sobey commented 1 year ago

@Bat-Sheva-Sh very off-topic for this thread, but setting state will cause a re-render. As you set state every single render, every render will trigger a re-render, causing your infinite loop. Maybe only update your state values if they are out of date.

Bat-Sheva-Sh commented 1 year ago

so what actually should i change/ drop?

Pedroor commented 1 year ago

For react-native app, https://github.com/kristerkari/react-native-svg-transformer solve it

thomas-tahmasebi commented 1 year 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!

Thanks, It was helpful

tsmock commented 1 year ago

For those that don't mind using CRACO, a sample craco.config.js for those that only use SVG imports in <img src=.../> and not as a component looks like so:

module.exports = {
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      // Fix CRA #11770
      const rules = webpackConfig.module.rules;
      for (const rule of rules) {
        if (Object.hasOwn(rule, 'oneOf')) {
          rule.oneOf.filter((currentValue, index, arr) => {
            const toRemove =
              currentValue.test instanceof RegExp && currentValue.test.test('something.svg');
            if (toRemove) {
              arr.splice(index, 1);
            }
            return toRemove;
          });
          rule.oneOf.push({
            test: /\.svg$/i,
            issuer: {
              and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
            },
            type: 'asset',
          });
        }
      }
      return webpackConfig;
    },
  },
};

If you have different needs, you can try adding the other svg rule from #12646 with the ?url query parameter.

steadyk commented 1 year ago

Removing the tag

<![CDATA[
...
]]>

and keeping the content in between, worked for us!

nicolello-dev commented 1 year ago

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

  • xmlns:xlink becomes xmlnsXlink
  • xml:space becomes xmlSpace
  • etc.

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.

This worked for me, thank you!

obaixii commented 1 year ago

<svg enable-background="new 0 0 32 32" height="32px" id="Layer_1" version="1.0" viewBox="0 0 32 32" width="32px" xml:space="preserve" // xmlSpace="preserve" -- just remove colon and write in camelCase xmlns="http://www.w3.org/2000/svg" // xmlns:xlink="http://www.w3.org/1999/xlink" // xmlnsXlink="http://www.w3.org/1999/xlink" -- -- just remove colon and write in camelCase

// Svg Code

This worked for me. 😁 Before image

After image

SimpleCookie commented 1 year ago

This is still an issue for me. I'm trying to upgrade from CRA 4 -> 5 but encountering this problem. Yes I know 2 known workarounds is:

  1. compress it by removing the namespaces using camelCase
  2. using the !file-loader!./img.svg

But in my case, I am receiving my SVG from my company's private npm repository so I'm unable to modify the SVG. I am also unable to solve it using the 2nd option with the file-loader, because who knows, it just don't seem to work on npm modules I guess?

I wish this bug would be resolved. Using workarounds don't feel like a solution. Namespaces are a part of the SVG-specification so I believe it should be supported.

How can I help?

IJMacD commented 1 year ago

@SimpleCookie Unfortunately I think the best option might be workaround number 3, which is to migrate away from CRA.

With the end of life here, this bug may never see a fix; instead getting entombed with the dead project.

konradekk commented 1 year ago

I donʼt see any end-of-life notice on this project… Meta representative could put one here to be fair with all the users (or at least us).

excuses for bringing your attention here, @gaearon: any progress or at least plans to address this?

huoguozhang commented 1 year ago

enable svgo, work for me

image
konradekk commented 1 year ago

@huoguozhang: enable svgo, work for me

huh? not sure if i should bother to ask, where did you set that exactly…? 🤔 (looks at least like a repetition of mathburnham and Poyoman39 answers)

charlesbaynham commented 1 year ago

if you use Inkscape, an alternative to running the svg through a compressor is to save it as an "optimised svg": this worked for me.

SimpleCookie commented 1 year ago

@SimpleCookie Unfortunately I think the best option might be workaround number 3, which is to migrate away from CRA.

With the end of life here, this bug may never see a fix; instead getting entombed with the dead project.

This is the solution we took. We migrated from CRA. I'm happy with the result.

rm-vt commented 8 months ago

This worked for me.

Animated SVG is working as expected.

In my case, I used animated SVG exported from Svgator that includes CDATA.

I have not done any changes to SVG file like remove/modifying CDATA. I have not done any changes to webpack config or so.

Simply tried the code from below pic.

Environments: "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^5.0.1",

image

Noushad-web commented 7 months ago

This worked for me. In my svg file. I did this - bx:guide TO bxGuide xmlns:bx TO xmlnsBx bx:fonts TO bxFonts Basically, change into camelCase.