How to fix that eslint complain about typescript's path aliasing

Question

I try to import interfaces like this

import placeholder from '@/assets/images/placeholder-image.svg'
import { Button } from '@/components/atoms/buttons/Button'

but they get es-lint complain Like this.

and

Missing file extension for "@/components/atoms/buttons/Button"eslintimport/extensions Unable to resolve path to module '@/components/atoms/buttons/Button'.eslintimport/no-unresolved

My .babelrc file is

  "presets": ["@babel/react", "@babel/preset-typescript"],
  "plugins": [
    "@babel/plugin-transform-typescript",
    "babel-plugin-typescript-to-proptypes",
    "@babel/plugin-proposal-export-default-from",
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    "@babel/plugin-proposal-object-rest-spread",
    ["@babel/plugin-proposal-private-methods", { "loose": true }],
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
    [
      "module-resolver",
      {
        // https://stackoverflow.com/a/57288642/2298548
        "root": ["."],
        "alias": {
          "@/svg": "./src/svg",
          "@/utils": "./src/utils",
          "@/hooks": "./src/hooks",
          "@/doc": "./src/doc",
          "@/config": "./config",
          "@/styles": "./src/styles",
          "@/fonts": "./src/assets/fonts",
          "@/components": "./src/components",
          "@/SVGIcons": "./src/SVGIcons",
          "@/base": "./src",
          "@/assets": "./src/assets"
        }
      }
    ]
  ]
}

and my .eslintrc.js is

  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.svg'],
      },
    },
  },

Does anyone have an idea for this why happen? In path alias how we have to find a solution for linter error without disable es-lint.

Have you checked [this](https://stackoverflow.com/questions/62340519/why-ide-shows-me-error-when-i-import-svg-file-to-use-as-react-component)? — Apoorva Chikara, Sep 14 '21 at 09:37
Does this answer your question? [Why IDE shows me error when I import SVG file to use as React component?](https://stackoverflow.com/questions/62340519/why-ide-shows-me-error-when-i-import-svg-file-to-use-as-react-component) — Roy, Sep 14 '21 at 09:40

score 1 · Answer 1 · answered Sep 14 '21 at 09:39

Try declaring a type and then import it, check this link.

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

  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;

  const src: string;
  export default src;
}

If the above commented solution doesn't work you might need to disable it temporary:

rules: {
  'import/no-unresolved': [
    'error',
    {
      'ignore': [ '\.svg' ]
    }
  ]
}

How to fix that eslint complain about typescript's path aliasing

1 Answers1