SVG/PNG imported in React component listed as Unlisted dependencies about knip HOT 10 CLOSED

...so instead of changing anything, we can now also install v3.4.0 :)

Please let me know if there are any issues or regressions!

from knip.

This should be handled properly. I have a few tests for coverage, but of course there can be a bug. Any chance you could use one of the options to make a minimal reproduction and drop your files and configuration there?

from knip.

Sure, here you go: https://github.com/KirianCaumes/Bug-knip
Let me know if you need more informations!

from knip.

This is a regression. I'm still using knip 2.41.3 and it works fine, but the latest version (3.3.5) has this issue.

from knip.

The issue is that standard module resolver does not work for non-standard files like .svg or .png. So it falls back to a simple one, but in this structure:

.
└── src
    ├── app.tsx
    ├── assets
    │   └── logo.png
    └── data
        └── data.tsx

This import in data/data.tsx won't be resolved properly:

import Logo from 'assets/logo.png'

For Knip to resolve it you'll have to use something like ../assets/logo.png or alternatively something like ~/assets/logo.png with paths config:

{
  "compilerOptions": {
    "paths": {
      "~/*": ["./src/*"]
    }
  }
}

This is a regression. I'm still using knip 2.41.3 and it works fine, but the latest version (3.3.5) has this issue.

I don't think this worked in v2 either.

from knip.

or alternatively something like ~/assets/logo.png

I agree that it's best to use an alias (like ~ or @) so that the paths would not look like regular npm packages.

from knip.

I was able to fix it in my project by declaring @ as an alias for src

I added this to tsconfig.json

  "compilerOptions": {
    // ...
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    }
  }

and this to webpack config

    alias: {
      '@': path.resolve(__dirname, 'src'),
    },

So my imports now look like import MySvg from '@/assets/svg/my.svg'
No more false warnings from knip.

from knip.

Tbh I think @ could be confusing too, since @scoped/packages exist (and also e.g. @scoped/packages/file is a valid specifier). But yeah, @/ is different and works just fine.

I just realized one thing you could also do today that fixes the issue in the attached repository:

{
  compilers: {
    svg: () => '',
    png: () => ''
  }
}

Then we trick TS into thinking 'assets/svg/my.svg.ts' exists. Then you don't need to change anything else in the codebase.

Perhaps I should try to build this into Knip (again)...

from knip.

🚀 This issue has been resolved in v3.4.0. See Release 3.4.0 for release notes.

from knip.

Everything works now, thank you!

from knip.