EsLint "Unable to resolve path to module" error in version 4.0

[kolorfilm]

I get a typescript error when try to import a svg like this:

import Close from './close.svg?react';

ESLint: Unable to resolve path to module './close.svg?react'.(import/no-unresolved)

[chrismeyers]

This is an ESLint error, not a TypeScript error. It looks related to this issue: import-js/eslint-plugin-import#1739

The workaround that I'm using is to just omit the querystring by reverting the include pattern to what it was before:

// vite.config.js
import { defineConfig } from 'vite';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [svgr({ include: '**/*.svg' })],
});

Then you can import without ?react:

import Close from './close.svg';

Alternativley, you can disable the ESLint rule for this specific case. The build will catch any missing SVG files and fail, but I prefer seeing the error through ESLint.

// .eslintrc.js
module.exports = {
  rules: {
    'import/no-unresolved': ['error', { ignore: ['\\.svg\\?react$'] }]
  },
};

[DevPowers]

@chrismeyers Using the proposal of :

plugins: [svgr({ include: '**/*.svg' })],

When importing the SVG, the IDE thinks I am importing a string and not a component giving Typescript errors.

[chrismeyers]

@DevPowers Maybe try setting declare module "*.svg" somewhere in your project to what it was before (see client.d.ts diff)?

[kolorfilm]

@DevPowers yeah what @chrismeyers said:

you can add something like:

declare module '*.svg' {
  import * as React from 'react';

  const ReactComponent: React.FunctionComponent<React.ComponentProps<'svg'> & { title?: string }>;

  export default ReactComponent;
}

to your vite-env.d.ts file.

[DevPowers]

That got rid of the import warning but when using the SVG component I am still getting issues "Property  style  does not exist on type  IntrinsicAttributes"

I am using the component like this, and passing style to control the height and width of the SVG image:

<SvgComponent
            aria-label="Logo"
            style={{
                height,
                width
            }}
        />

For now I can use the eslint ignore option and just import using the ?react option, but it seems a bit hacky. Would be nice if it played nice with typescript and eslint out of the box

[issam-seghir]

using this plugin: [svgr({ include: '**/*.svg' })], in vite config works great for me,
i don't need to use ?reactsyntax anymore, thanks