Svgr: import xx from 'path/xx.svg' Error

[XianZhengquan]

test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: [ { loader: '@svgr/webpack', options: { icon: true } } ]

import logoSvg from 'paths/logo.svg';

[gregberge]

Hello @XianZhengquan, can you please submit a repro example?

[XianZhengquan]

Thank. @neoziro Thanks.I will create a new repository on github and put the repo on it.

[XianZhengquan]

@neoziro github
https://github.com/XianZhengquan/svgr-webpack-error

[gregberge]

It looks like a Typescript issue, help is welcome here. @theKashey maybe 🙏

[XianZhengquan]

What should I do?🤔🤔🤔

[gregberge]

Probably asking a Typescript user 😓

[XianZhengquan]

God bless!🙏🙏🙏
This has been bothering me.

[theKashey]

So - there are only two questions:

• try it has typescript-ish output
• why there is no second loader to handle TS or, to be more concrete, JSX

[theKashey]

3:22 is props>:<, not a valid JS. So you need to specify a loader to handle a result "SVG".

[XianZhengquan]

@neoziro I don't understand🤔🤔🤔

[theKashey]

should be like

{ 
  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
  use: [ 
     "ts-loader", // !
     { loader: '@svgr/webpack', options: { icon: true } }  // probably with `babel:false`
   ]

But still the question - why svgr output is in typescript.

[XianZhengquan]

Because there is a configuration file .svgrrc.js, the template output is typescript

[XianZhengquan]

should be like

{ 
  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
  use: [ 
     "ts-loader", // !
     { loader: '@svgr/webpack', options: { icon: true } }  // probably with `babel:false`
   ]

But still the question - why svgr output is in typescript.

Can it run normally like this?

[theKashey]

So - you don't need to compile it to typescript if you are using webpack-loader - for TS it still SVG and nothing more.

It worth to use only if you are pre-compiling these images.

[pocesar]

you need to add a svg.d.ts to your project like this:

declare module '*.svg' {
  import { FunctionComponent, SVGProps } from 'react';
  const _: FunctionComponent<SVGProps<HTMLOrSVGElement>>;
  export = _;
}

and it should work as expected (although I'm not sure if the props will actually be passed down to the SVG that is about to be inlined, if it doesn't, change SVGProps to any)

[gregberge]

Looks like it is solved.