Bug: [5.0] SVGs cannot be imported (not as components, but regular import) #11770
Comments
|
Does this import work? import { ReactComponent as Logo } from "./Logo.svg"; |
|
I should add that importing |
|
The same error happens for me even when importing with I’ve tried to minimize my SVG file with scour but the import still fails. |
|
I am also unable to use an SVG import with My SVG contains CDATA which resulted in this error: Removing the CDATA block from the SVG file resulted in the same error @alamothe reported. |
|
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. 👍 if it works for you! |
|
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 |
alamothe
changed the title
|
Same issue. Is there a possible fix yet? |
I provided 1 above. it might work for you. read up |
I used svgo as a node CLI workaround. Did the trick for me. YMMV. |
Thanks, it worked like a charm! |
|
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.)
|
|
None of the solutions above worked for me. I am using animated SVG's which may be a different issue all together. |
|
I have this issue too |
|
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 |
Same issue, work for me ! Thanks |
This worked perfectly for me!! Thank you!! |
|
Is it a viable solution to manually change the content of the SVG files? |
svgo runs from the command line. It will process multiple files. It's not a solution, but a viable workaround. |
|
SVGO didn't worked for me, but the import with |
|
I accidentally excluded the |
|
For those trying svgo solution try run |
|
https://www.svgminify.com/ works for me too! |
|
this is the return return ( ); |
|
again.. |
|
@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. |
|
so what actually should i change/ drop? |
|
For react-native app, https://github.com/kristerkari/react-native-svg-transformer solve it |
Thanks, It was helpful |
|
For those that don't mind using CRACO, a sample craco.config.js for those that only use SVG imports in 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 |
This is a recommended workaround for a known bug in react-scripts v.5. See facebook/create-react-app#11770
This is a workaround for a known bug in react-scripts v5. Solution was suggested at facebook/create-react-app#11770 (comment)
This is a workaround for a known bug in react-scripts v5. Solution was suggested at facebook/create-react-app#11770 (comment)
|
Removing the tag and keeping the content in between, worked for us! |
This is a workaround for a known bug in react-scripts v5. Solution was suggested at facebook/create-react-app#11770 (comment)
This is a workaround for a known bug in react-scripts v5. Solution was suggested at facebook/create-react-app#11770 (comment)
* Upgrade react-scripts to 5.0.1 * Add package-lock.json * Remove jsdom v.16 from jest environment * Update package-lock * Upgrade version of jsdom environment * Refactor failing tests * Compress SVGs This is a workaround for a known bug in react-scripts v5. Solution was suggested at facebook/create-react-app#11770 (comment) * Rename eslint config file Rename eslint configuration file * Rename eslint json file * Remove ts-eslint camelcase directives They are useless anyways, as we do not have definition of camelcase rules in config * Fix eslint errors and warnings Some errors and warnings are fixed and some are suppressed * Fix failing login tests * Increase test timeout globally
This worked for me, thank you! |
|
<svg This worked for me. 😁 After |
- [x] Migrate to CRA5 + webpack 5 using latest `[email protected]` - [x] Optimize few svg files at https://jakearchibald.github.io/svgomg/ to avoid `"React's JSX doesn't support namespace tags"` errors - [x] Use `file-loader` explicit to fix issues by importing svg (temporary workaround facebook/create-react-app#11770 (comment)) - [x] Quick clean up: Remove unused *.svg files - [x] Fix tests
|
This is still an issue for me. I'm trying to upgrade from CRA 4 -> 5 but encountering this problem.
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? |
|
@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. |
|
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? |
|
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) |
|
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. |
This is the solution we took. We migrated from CRA. |
- [x] Migrate to CRA5 + webpack 5 using latest `[email protected]` - [x] Optimize few svg files at https://jakearchibald.github.io/svgomg/ to avoid `"React's JSX doesn't support namespace tags"` errors - [x] Use `file-loader` explicit to fix issues by importing svg (temporary workaround facebook/create-react-app#11770 (comment)) - [x] Quick clean up: Remove unused *.svg files - [x] Fix tests
|
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. Simply tried the code from below pic. Environments:
|
|
This worked for me. |
See facebook/create-react-app#11770 Compressed and optimized SVGs using https://github.com/svg/svgo
and others
Describe the bug
When importing a SVG in a regular manner (not as a component):
There is an error upon
yarn start: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 defaultEnvironment
The expected behavior
Lie in CRA4, there shouldn't be an error.
The text was updated successfully, but these errors were encountered: