gregberge / svgr

Transform SVGs into React components 🦁
https://react-svgr.com
MIT License
10.59k stars 422 forks source link

system-wide svgo.config.js overrides default svgr one #727

Open maxencelaurent opened 2 years ago

maxencelaurent commented 2 years ago

🐛 Bug Report

If a global svgo.config.js is defined (eg. in home directory), svgr may fail to load some SVGs.

To Reproduce

Load SVGs with "@svgr/webpack" loader. Do not define any parameters.

      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      }

Create a dummy svgo.config.js file in your home: (~/svgo.config.js)

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

Create an SVG with some namespaces defined:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   width="210mm"
   height="297mm"
   viewBox="0 0 210 297"
   version="1.1"
   id="svg5"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <g>            
    <rect style="fill:#00ff00;stroke-width:2"                                                                        
       width="9.4238062"
       height="9.0213614"
       x="7.242053"
       y="5.5198383" />
  </g>
</svg>

Import it in your code:

import MySvg from `theFile.svg`;
run webpack.

As the global svgo config defines no plugins, the SVG is not sanitized and still contains xmlns:svg attribute. Such a svg will be rejected by @babel/plugin-transform-react-jsx.

Expected behavior

SVGR should ignore the global svgo config.

Link to repl or repo

Setup repo

git clone https://github.com/maxencelaurent/SvgrSvgo.git
cd SvgrSvgo
yarn install

Build without global config is fine:

yarn webpack --mode production

Create the global config and re-build:

echo "module.exports = { plugins: [ ], };" > ~/svgo.config.js
yarn webpack --mode production

Output:

ERROR in ./src/pictures/rect.svg
Module build failed (from ./node_modules/@svgr/webpack/dist/index.js):
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.
[...]

Run npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard

*** Clipboard option removed - use clipboardy or clipboard-cli directly ***

## System:
 - OS: Linux 5.15 Ubuntu 22.04 LTS 22.04 LTS (Jammy Jellyfish)
 - CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
 - Memory: 13.77 GB / 46.78 GB
 - Container: Yes
 - Shell: 5.8.1 - /usr/bin/zsh
## Binaries:
 - Node: 16.13.0 - /usr/local/bin/node
 - Yarn: 1.22.10 - /usr/local/bin/yarn
 - npm: 8.1.0 - /usr/local/bin/npm
## npmPackages:
 - @svgr/webpack: ^6.2.1 => 6.2.1 
stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.