smeijer / unimported Goto Github PK

Hi there 👋

I started to take a look at this and use it in my projects. I noticed one thing that may be useful and if it's already a feature and I missed it then sorry! While the command output is great, it would be nice to specifiy and option to write that to a file. Especially if you use this on a large project for the first time, there may be a lot of things to go through and you may want to reference back to it.

I'm happy to take a look to see what it would take to implement this.

I've added the smart pipeline operator to my Babel config via a plugin.

{
  "presets": [ "babel-preset-react-app" ],
  "plugins": [
    [ "@babel/plugin-proposal-pipeline-operator", { "proposal": "smart" } ]
  ]
}

When I try to run unimported, I get the following error:

⠙ resolving imports
Failed parsing /Users/landon/Development/startup/chess-cards/source/javascript/stores/error-store.js
TSError: Expression expected.
    at Object.createError (/Users/landon/Development/startup/chess-cards/node_modules/unimported/node_modules/@typescript-eslint/typescript-estree/dist/node-utils.js:522:12)
    at Object.convertError (/Users/landon/Development/startup/chess-cards/node_modules/unimported/node_modules/@typescript-eslint/typescript-estree/dist/convert.js:36:25)
    at Object.astConverter (/Users/landon/Development/startup/chess-cards/node_modules/unimported/node_modules/@typescript-eslint/typescript-estree/dist/ast-converter.js:15:25)
    at parseWithNodeMapsInternal (/Users/landon/Development/startup/chess-cards/node_modules/unimported/node_modules/@typescript-eslint/typescript-estree/dist/parser.js:328:49)
    at Object.parse (/Users/landon/Development/startup/chess-cards/node_modules/unimported/node_modules/@typescript-eslint/typescript-estree/dist/parser.js:290:21)
    at /Users/landon/Development/startup/chess-cards/node_modules/unimported/dist/traverse.js:133:41
    at Generator.next (<anonymous>)
    at fulfilled (/Users/landon/Development/startup/chess-cards/node_modules/unimported/dist/traverse.js:24:58) {
  fileName: '/Users/landon/Development/startup/chess-cards/estree.tsx',
  index: 1146,
  lineNumber: 56,
  column: 22
}

Here's the problem part of the file:

...

export class ErrorStore {
  ...  

  get title() {
    return this.type |> kebabCase |> replaceAll(#, "-", " ") |> titleCase;
  }

  ...
}

Does unimported use my local Babel configuration? Is there a way to configure it to do so?

First, this is a really helpful tool, thank you for making it.

I have a file structure that looks something like:

src/
-- presentation/
---- client.js
---- api.js

api is imported by client.js using an absolute import from the src directory:
import * as api from '/presentation/api.js'

However, this is not picked up by unimported, I get the following output:

Unresolved import:
presentation/api.js

Unimported files:
src/presentation/api.js

In my jsconfig, I set the root to src, like so:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

to enable the absolute imports.

Do you know how to make this work?

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/unimported/dist/traverse.js b/node_modules/unimported/dist/traverse.js
index e621f6b..607e491 100644
--- a/node_modules/unimported/dist/traverse.js
+++ b/node_modules/unimported/dist/traverse.js
@@ -127,7 +127,7 @@ function extractFromScriptTag(code) {
     let end = -1;
     // walk the code from start to end to find the first <script> tag on it's own line
     for (let idx = 0; idx < lines.length; idx++) {
-        if (lines[idx].trim() === '<script>') {
+        if (lines[idx].trim() === '<script>' || lines[idx].trim().startsWith('<script ')) {
             start = idx;
             break;
         }

This issue body was partially generated by patch-package.

Here is the context: #19 (comment)

Please note that the space in <script is important, as I actually ran into a component called <script-editor-input> in our codebase...

I'm migrating a TypeScript project to output pure ESM. As part of that effort, I need to update every import which was previously extensionless, to specify a ".js" extension (even though the file in the source directory has a ".ts" extension). Like this:

// old way
import aThing from '../a/module';

// new way
import aThing from '../a/module.js';

It seems like unimported is unable to determine that ../a/module.js should be resolved to ../a/module.ts and so it reports almost all files as being unimported.

I've been referencing this guide for the migration to pure ESM.

Our project uses flow, with some files just containing type definitions. These files are only references via a type import:
import type {MyType} from 'typefile'
unimported flags the the typefile as not imported.

This sounds like a great tool to enforce removing superfluous code once it is no longer used. To do this, a --ci flag would be great that fails if any unimported files are present. Bonus points if it also fails for any ignore that is not needed.

Hello! I discovered this tool a few weeks ago, been testing it on several repos and so far it has been super useful!

One thing that I believe could help in some use cases is to be able to pass the config file path through the CLI, like eslint or other tools. This would facilitate having a centralised shared configuration for several repos, or even to use this package in a custom package used for checking code

Hello! Trying to run this on a monorepo, and it looks like basically all my files are being reported as unimported.

I saw a similar question in an issue here, but its unresolved: #43

My project has both Next.js and Rails-backed React pages. We use flow, so I'm running it with the npx unimported --flow command. (I have also tried with the --no-cache flag)

My .unimportedrc.json:

{
  "ignorePatterns": [
    "**/public/**",
    "**/node_modules/**",
    "**/*.stories.{js,jsx,ts,tsx}",
    "**/*.tests.{js,jsx,ts,tsx}",
    "**/*.test.{js,jsx,ts,tsx}",
    "**/*.spec.{js,jsx,ts,tsx}",
    "**/tests/**",
    "**/__tests__/**",
    "**/__mocks__/**",
    "**/flow-typed/**"
  ],
  "ignoreUnimported": [],
  "ignoreUnused": ["next", "react", "react-dom"],
  "ignoreUnresolved": [],
  "rootDir": ".",
  "aliases": {
    "stylesheets": ["app/assets/stylesheets", "app/assets/stylesheets/*"],
    "mixins": [
      "app/assets/stylesheets/mixins",
      "app/assets/stylesheets/mixins/*"
    ],
    "storefront": ["storefront", "storefront/*"]
  }
}

When I run npx unimported --show-config, I get this:

{
  version: '1.19.1',
  preset: 'next',
  flow: true,
  rootDir: '.',
  ignoreUnresolved: [],
  ignoreUnimported: [],
  ignoreUnused: [ 'next', 'react', 'react-dom' ],
  ignorePatterns: [
    '**/public/**',
    '**/node_modules/**',
    '**/*.stories.{js,jsx,ts,tsx}',
    '**/*.tests.{js,jsx,ts,tsx}',
    '**/*.test.{js,jsx,ts,tsx}',
    '**/*.spec.{js,jsx,ts,tsx}',
    '**/tests/**',
    '**/__tests__/**',
    '**/__mocks__/**',
    '**/flow-typed/**'
  ],
  moduleDirectory: undefined,
  entryFiles: [],
  extensions: [ '.js', '.jsx', '.ts', '.tsx' ]
}

I'm wondering if it's an issue with having both Next.js and Rails powered pages. Thanks!

Just ran this on a TS 4.1+ project that used the following syntax:

type X = `${Extract<NAMESPACE, string>}/${Extract<ACTION, string>}`

Since that’s the only file that crashed unimported, I’m pretty sure that this is related to depending on an old version of @typescript-eslint/typescript-estree which doesn’t support this feature yet.

Workaround

Add this to your package.json:

{
	"resolutions": {
		"@typescript-eslint/typescript-estree": "4.15.0"
	}
}

We are trying to add unimported to our CI/CD build pipeline.

The goal is to reduce accumulation of dead files.

However, sometimes, files that are being worked on, might not be included in any of the pages, e.g. they are being developed as stand alone UI components in a storybook.

In those cases, we want to adopt a convention that we exclude files that match __incomplete__ pattern.

The catch is that we do not want to allow any of these files to be imported into pages, i.e.

Would like a rule that alerts when files matching a pattern are included in entries.

The way I see this, given the following file structure

<root>/package.json // defines "workspaces"
<root>/.unimportedrc.json // defines "entries" as ["src/*"]
<root>/packages/<package_name>/package.json
<root>/src/<app_name>/package.json

We should ideally be able to call unimported from the root and detect both

• errors within packages (same as running npx unimported from every folder)
• packages not use by any "entry" defined in the /.unimportedrc.json

Not sure if I just misunderstood something about the configuration, but the way that I understand it, I have to mark tests as entry files, or otherwise test helpers and test dependencies will not be recognized as being imported. But it seems I need to still mark the test files as ignored as well. At the same time, e. g. the pages in my next app are not ignored, but they do not show up in the unimported output.
Here's my config for reference:

{
  "ignorePatterns": [
    "**/node_modules/**"
  ],
  "ignoreUnimported": [],
  "ignoreUnused": [
    "next",
    "react",
    "react-dom"
  ],
  "ignoreUnresolved": [],
  "entry": ["pages/**/*", "src/**/*.stories.tsx", "src/**/*.test.ts", "scripts/*.ts"]
}

When I run unimported, the entry file is being reported as unimported, which is true because it's the top-level source file, but shouldn't it be excluded from being reported as unimported?

E.g.

// .unimportedrc.json
{
	"entry": ["index.js"]
}

// index.js
import bla from './bla'

// bla.js
export default 1

npx: installed 195 in 11.958s

       summary               unimported v1.5.0
─────────────────────────────────────────────────────────────────────────────────────────────────────────
       entry file          : 

       unresolved imports  : 0
       unused dependencies : 0
       unimported files    : 1


─────┬───────────────────────────────────────────────────────────────────────────────────────────────────
     │ 1 unimported files
─────┼───────────────────────────────────────────────────────────────────────────────────────────────────
   1 │ index.js
─────┴───────────────────────────────────────────────────────────────────────────────────────────────────


       Inspect the results and run npx unimported -u to update ignore lists

Hi, thanks for creating this tool!
I'm trying to use it in a react project but I get all the files unimported; I saw a few questions about the same #43 , #59 but still haven't been able to make it work.

My config:

{
  "rootDir": "./src",
  "aliases": {
    "common/*": [
      "./src/common",
      "./src/common/*"
    ],
    "actions/*": [
      "./src/actions",
      "./src/actions/*"
    ],
    "src/*": [
      "./src",
      "./src/*"
    ],
    "utils/*": [
      "./src/utils",
      "./src/utils/*"
    ]
  },
  "ignorePatterns": [
    "**/node_modules/**",
    "**/*.tests.{js,jsx,ts,tsx}",
    "**/*.test.{js,jsx,ts,tsx}",
    "**/*.spec.{js,jsx,ts,tsx}",
    "**/tests/**",
    "**/__tests__/**",
    "**/__testUtils__/**",
    "**/*.d.ts"
  ],
  "ignoreUnimported": [],
  "ignoreUnused": [],
  "ignoreUnresolved": []
}

Running npx unimported --show-config:

{
  version: '1.19.1',
  preset: 'node',
  flow: false,
  rootDir: './src',
  ignoreUnresolved: [],
  ignoreUnimported: [],
  ignoreUnused: [],
  ignorePatterns: [
    '**/node_modules/**',
    '**/*.tests.{js,jsx,ts,tsx}',
    '**/*.test.{js,jsx,ts,tsx}',
    '**/*.spec.{js,jsx,ts,tsx}',
    '**/tests/**',
    '**/__tests__/**',
    '**/__testUtils__/**',
    '**/*.d.ts'
  ],
  moduleDirectory: undefined,
  entryFiles: [
    {
      file: 'src/index.js',
      aliases: {
        'common/*': [ './src/common', './src/common/*' ],
        'actions/*': [ './src/actions', './src/actions/*' ],
        'src/*': [ './src', './src/*' ],
        'utils/*': [ './src/utils', './src/utils/*' ]
      },
      extensions: [ '.js', '.jsx', '.ts', '.tsx' ]
    }
  ],
  extensions: [ '.js', '.jsx', '.ts', '.tsx' ]
}

Almost all the imports I have use the aliases, eg: 'src/common'; and there are index.js files in almost every folder.

Thanks!

The package handles well enough unused asset files that are bundled into js bundle in a RN app. Though, there, there is possibility to add assets saved for example in android/app/src/main/res Or similarly in ios/app_name/Images.xcassetsetc.
These can be referenced and loaded using the file name through the js code. So a good detection point would be to check if these filenames exist as a string somewhere in the js code.
And generally a way to detect unused images for example

Hi, great job with this!

I'd like to encorporate unimported into a monorepo tool I'm working on.

Ideally, there'd be an api something like this:

import { unimported } from 'unimported';

export const unimportedForMonoRepo = (workspaceDirectories: string[]) =>
  Promise.all(workspaceDirectories.map((cwd) => {
    const { 
        unimportedDependencies, 
        unimportedFiles, 
        packageName 
    } = await unimported({ cwd, ...defaultConfig, ...otherOptions });

   // Example usage of the data
   if (unimportedDependencies.length > 0) {
     console.log(`${packageName} has ${unimportedDependencies.length} unimported dependencies: 
        ${unimportedDependencies.join(', ')}
     `);
   } 
  });

I think I could do this today using your code, but if you were to change the internal function names, it would break my code when we upgrade, so a public API would feel safer to use.

The reason why I prefer this over the command line tool is for a monorepo with 60+ packages, we'd have to open 60+ shells, and that's slow and memory intensive. Also, by using the API I can streamline the output so it's not overwhelming for developers.

Many thanks for considering this!

First of all, great tool! Thanks for building and maintaining it. I was surprised at how difficult this is in JS/TS compared to other languages.

Is there a way to use this as part of an existing eslint setup? As an eslint plugin? Would be super useful to keep all the linting under a single command/tool.

If not, seems not a whole lot of work to build it, I could give it a shot: https://eslint.org/docs/developer-guide/working-with-plugins

I'm trying to run unimported on a React w/ typescript project. And when running npx unimported --no-cache all the project files are listed as not used. I have read the other issues but the solutions there didn't help in my case.

Running npx unimported --show-config gives the following:

{
  version: '1.19.1',
  preset: 'node',
  flow: false,
  rootDir: './src',
  ignoreUnresolved: [],
  ignoreUnimported: [],
  ignoreUnused: [],
  ignorePatterns: [
    '**/node_modules/**',
    '**/*.tests.{js,jsx,ts,tsx}',
    '**/*.test.{js,jsx,ts,tsx}',
    '**/*.spec.{js,jsx,ts,tsx}',
    '**/tests/**',
    '**/__tests__/**',
    '**/*.d.ts'
  ],
  moduleDirectory: undefined,
  entryFiles: [
    {
      file: 'src/index.tsx',
      aliases: {},
      extensions: [ '.js', '.jsx', '.ts', '.tsx' ]
    }
  ],
  extensions: [ '.js', '.jsx', '.ts', '.tsx' ]
}

       summary               unimported v1.19.1 (node)

       entry file          : src/index.tsx

       unresolved imports  : 49
       unused dependencies : 27
       unimported files    : 402

Any clue?

It would be great to a add configuration option to resolve which allows us to extend the module resolve directory to allow other directories other than "node_modules".

Browsify's resolve has a configuration option called moduleDirectory which defaults to "node_modules" but can be extended to accept an array of strings.

Proposal

Add a moduleDirectories configuration option to the applications configuration object.

export interface UnimportedConfig {
  flow?: boolean;
  entry?: string[];
  extensions?: string[];
  ignorePatterns?: string[];
  ignoreUnresolved: string[];
  ignoreUnimported: string[];
  ignoreUnused: string[];
  moduleDirectories?: string[]
}

Hi All,
Can you please recommended/correct usage for monorepos? Should used in each package our in root folder?

Is there a way to troubleshoot speed of unimported?

We have about ~2000 files in our project & a fresh run takes about 18 minutes. 😞

       Inspect the results and run npx unimported -u to update ignore lists
unimported --no-cache  1162.54s user 140.76s system 118% cpu 18:21.17 total

This time is unfortunately prohibiting us from adding unimported to our CI/CD pipeline.

Is this expected?

If not, how do I debug what's causing this?

The moduleDirectory config option is ignored when passed in through the unimportedrc.json file.

.unimportedrc.json

{
  "entry": ["application/src/index.js"],
  "extensions": [ '.ts', '.js', '.tsx', '.jsx' ],
  "ignorePatterns": [
      '**/node_modules/**',
      '**/__tests__/**'
  ],
  "ignoreUnresolved": [],
  "ignoreUnimported": [],
  "ignoreUnused": [],
  "moduleDirectory": ["node_modules", "application/src"]
}

❯ npx unimported --no-cache --show-config

npx: installed 215 in 8.162s
{
  version: '1.19.0',
  preset: 'node',
  flow: false,
  rootDir: undefined,
  ignoreUnresolved: [],
  ignoreUnimported: [],
  ignoreUnused: [],
  ignorePatterns: [
    '**/node_modules/**',
    '**/__tests__/**'
  ],
  entryFiles: [
    {
      file: 'application/src/index.js',
      aliases: {},
      extensions: [ '.ts', '.js', '.tsx', '.jsx' ]
    }
  ],
  extensions: [ '.ts', '.js', '.tsx', '.jsx' ]
}

CRA React 17 app. I have a bunch of named exports in two files queries & mutations in operations folder. These two are then exported from operations/index.ts in a following way:

export * from "./queries";
export * from "./mutations";

Both are showing in the unimported files list despite the fact that they are indeed used many times.

In my local machine (macOs 10.15.14) when I run unimported version v1.19.0 I see no errors when I run unimported. However when running it on GHA, I get the following false positive

       summary               unimported v1.19.0 (node)
───────────────────────────────────────────────────
       entry file          : src/index.jsx

       unresolved imports  : 0
       unused dependencies : 0
       unimported files    : 1


─────┬───────────────────────────────────────
     │ 1 unimported files
─────┼───────────────────────────────────────
   1 │ src/Components/xxx/XXX.jsx
─────┴───────────────────────────────────────

Is there any way to debug this?

I’m unfortunately stuck with a framework that encourages using non-standard .vue files. Would be amazing if unimported could parse them.

Should be rather easy to implement an MVP version IMO, as the most important part would basically be to just ignore everything outside of the <script> block (as that’s not JS/TS) and interpret the result as (j|t)sx?

yarn run v1.22.10
$ ./node_modules/.bin/unimported .
⠙ resolving imports
Failed parsing ./source/SomeVueFile.vue
{
  index: 34,
  lineNumber: 2,
  column: 23,
  message: 'Identifier expected.'
}

e.g. getting many false-positives for @babel/ and @types/

   1 │ @babel/polyfill
   2 │ @react-stately/checkbox
   3 │ @testing-library/cypress
   4 │ @tsconfig/node12
   5 │ @types/express
   6 │ @types/gapi.auth2
   7 │ @types/http-terminator
   8 │ @types/ioredis
   9 │ @types/is-object
  10 │ @types/lightship
  11 │ @types/segment-analytics
  12 │ @types/ua-parser-js
  13 │ @types/yargs

Would like to just ignore @babel/* and @types/*.

Hi there!

If your company is using unimported, please let us know who you are, so we can mention you in the README and forthcoming website.

Instructions:

• Share your project / company name
• Share your logo (in which case it might be used in the readme / frontpage etc)
• If your project is open source or public, please share a link!
• If possible, tell us how many files/modules you were able to remove with the help of unimported

Thanks for sharing!

Hey

npx unimported is failing with the error
file does not contain valid json: tsconfig.json error: SyntaxError: Unexpected token / in JSON at position 59 at JSON.parse (<anonymous>) at Object.<anonymous> (C:\Users\shchaw\AppData\Roaming\npm-cache\_npx\29832\node_modules\unimported\dist\fs.js:67:32) at Generator.next (<anonymous>) ^TSyntaxError: Unexpected token / in JSON at position 59^T^C
P.S my tsconfig does not even have 30 lines

I'm trying to figure out how to use unimported with my project, but I can't seem to get it to work with TypeScript baseUrl paths.

The repository is here.

I've tried added a "rootDir" option as mentioned in the README, but it doesn't seem to do anything. I also tried replacing "rootDir" with "baseUrl" as that's mentioned in a code snippet in #34.

It would be really nice to have a good npm package to find all imports and requires. There are a few that exist, but they are not bulletproof.

• find-imports
• import-scan
• etc.

It would be really useful (for me at least) to use globs in file path specifications (i.e. entry and ignoreUnimported), not just pattern specifications (e.g. ignorePatterns).

So my .unimportedrc.json could look like this and work as expected:

{
  "entry": ["src/index.tsx", "src/**/*.test.{j,t}s"],
  "ignoreUnresolved": [],
  "ignoreUnimported": "src/setup{Proxy,Tests}.js",
  "ignoreUnused": [],
  "ignorePatterns": ["**/node_modules/**", "**/*.d.ts"]
}

Excellent tool! Sharing my experience to improve it:

Basically, I ran the tool first (granted, my bad for not reading the whole README) and got a bunch of unresolved imports for the ones relying on aliases... I tried a bunch of configurations based on the README that didn't get me correct results, which sent me to other tools and then back to this issue's comment, which puzzled me more that it worked on a test project but not on mine... so after poking into the code and about an hour of flailing, I found that the issue was that I was getting the cached results!

So I wanted to volunteer some possible improvements to the README to reduce the chance of this happening to others like me. How about:

1. Adding a section about running in CRA projects, offering the config snippet '{ "aliases": { "*": "src/*" } }'?
2. Adding a troubleshooting section, pointing people to delete the cache after doing any modification to the config file? or a more prominent explanation in the main config section.

Thanks for making unimported!

ts projects have a lot of @type/* dependences and they are detected as 'unused dependencies'.

Needs config like "ignoreUnusedPattern"

Hello,
I have roughly the following setup in my React app:

Webpack overrides (which is what's causing the issue, I think):
config-overrides.js:

module.exports = {
  webpack: override(
    addWebpackAlias({
      ...
      react: path.resolve(__dirname, './node_modules/react'),
      src: path.resolve(__dirname, './src'),
    }),

src/components/Badge/index.js:

const Badge = () => { ... }

export default Badge;

src/pages/SomePage/SomePage.js:

import Badge from 'src/components/Badge';
...

This kind of root import results in src/components/Badges/index.js being placed in the unimported files list.

If I modify the import to a relative one:
src/pages/SomePage/SomePage.js:

import Badge from '../../components/Badge';

the component is properly detected.

I've also tried modifying the module directory to this, without any effect:
"moduleDirectory": ["node_modules", "src/"]

Any suggestion for a workaround? Thanks in advance.

Cannot detect the imported file if a project not use relative path import.

For example, use babel-plugin-module-resolver:

// .babelrc
{
  "plugins": [
    [ "module-resolver", {
       "alias": {
          "@": "./src"
        }
     }]
  ]
}

or use webpack resolve. alias

module.exports = {
  //...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
};

Hi, I have an issue with aliases, unimported can't resolve paths for my components,

• here is my unimported config,
  
• I've installed unimported as a dev dependency, and trying to run - "npm run unimported", and it shows me that I have unresolved import
  ,
  
  here it's, I've read all the familiar issues and didn't found answer, btw, I've created repo which shows the issue, https://github.com/Cigan12/unimported-reproduce

Otherwise an excellent tool, thank you

When using pnpm, it requires all dependencies used in code, to be listed in package.json.

Many packages violate this.

When I get an error, I want to pass in the file path (from the stack trace) of the file that contains the require that cannot be found.

It should then search upwards to the closest package.json and run from there, telling me which deps are missing from the package.json.

I then add them to .pnpmfile.cjs.

Is this possible with unimported?

My tsconfig.json had an extra comma in it, so the readJson was failing silently. It's not really an issue with the tool, but it did take me a while to narrow down the reason why none of my tsconfig paths were being resolved. I ended up figuring it out when I manually added a console.error statement in the catch(e) {} block on line 41 of fs.ts and it told me that there was an unexpected } in the file. However, just adding that in results in a lot of console statements when I run the jest tests on this project.

Perhaps just printing a warning in the case of tsconfig.json would be sufficient? Or adding a line into the README.md as a possible debug check?

I didn't open a PR for this as I'm not sure if you'd want to handle this, and if you do, what option you'd prefer.

Feel free to close this issue without comment if you don't feel that unimported should handle this case.

Hi there,

Firstly - this is a fantastic project, love your work!

We have a create-react-app, using Typescript with craco to override some configuration limitations of CRA.

Part of this setup is to use craco-alias - which recommends using a separate tsconfig file (as some options are prevented from being overwritten by CRA), so you get this kind of setup:

tsconfig.json:

{
  "extends": "./tsconfig.extend.json",
  "compilerOptions": {
    "target": "es5",
    ...
}

tsconfig.extend.json:

  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "~api/*": ["./api/*", "./api"],
      "~assets/*": ["./assets/*", "./assets"],
      "~components/*": ["./components/*", "./components"],
      ...
    }
  }
}

Is there anyway to either get unimported to recognise the extends option in tsconfig.json so that it can find the aliases contained therein, or to supply additional files to unimported to load?

Hello, thanks for making this tool!
I'm attempting to use it on a next.js project and wondering if this can be configured to do so.

It seems that each page under the directory pages would be considered a separate entry point. I tried listing each page as an entry point, but the output is showing them as unimported. I'm assuming because they don't import each other. Ideally the config would be entry: ["pages/**"]

Am I going about this correctly?

There are example repos here

Hello,

First of all, thank you for building this tool!

The repo I'm using it in has lots of png files with pixel density suffixes (i.e. [email protected]). Since these images are imported without stating the specific suffix, it seems that Unimported is flagging many of them as being unresolved imports. We already have another test to check for unused images so I'd prefer to just exclude all png files from Unimported's check. When I run the command with the -u flag it finds and ignores all the png imports, but since this is a large repo with hundreds of images it generates a very large config file. I would prefer to use a generalized selector to ignore all pngs. I have tried many different ways of doing this but none of them work. Here is a sample of what the ignored imports look like when the config file is automatically generated (I've only included a few images for brevity's sake):

{
  "entry": ["index.android.js", "index.ios.js"],
  "aliases": {
    "@images/*": ["./javascript/images/*", "./javascript/images/**"]
  },
  "extensions": [".ts", ".js", ".tsx", ".jsx"],
  "ignoreUnresolved": [
    "../images/arrow-left-gray-small.png",
    "../images/arrow-left-white.png",
    "../images/close-gray-bold.png",
    "../images/close-gray.png",
    "../images/close-white-bold.png",
    "@images/info-request/edit-message.png",
    "@images/info-request/info-requested.png",
    "@images/info-request/message-sent.png",
    "@images/journey.png",
    "@images/nye-clock.png",
    "@images/phone-white.png"
  ],
  "ignoreUnimported": [],
  "ignoreUnused": [],
  "ignorePatterns": [
    "**/node_modules/**",
    "**/*.stories.{js,jsx,ts,tsx}",
    "**/*.tests.{js,jsx,ts,tsx}",
    "**/*.test.{js,jsx,ts,tsx}",
    "**/*.spec.{js,jsx,ts,tsx}",
    "**/tests/**",
    "**/__tests__/**",
    "**/*.d.ts",
    "**/*.png",
    "server/**",
    "javascript/graphql/__generated__/**",
    "android/**",
    "__mocks__/**",
    "@images/**",
    "@images/*"
  ]
}

And here's my attempt at using a more general selector to ignore all pngs and all imports from the @images alias.

{
  "entry": ["index.android.js", "index.ios.js"],
  "aliases": {
    "@images/*": ["./javascript/images/*", "./javascript/images/**"]
  },
  "extensions": [".ts", ".js", ".tsx", ".jsx"],
  "ignoreUnresolved": ["@images/*", "@images/**", "@images/**/**", "**/*.png"],
  "ignoreUnimported": [],
  "ignoreUnused": [],
  "ignorePatterns": [
    "**/node_modules/**",
    "**/*.stories.{js,jsx,ts,tsx}",
    "**/*.tests.{js,jsx,ts,tsx}",
    "**/*.test.{js,jsx,ts,tsx}",
    "**/*.spec.{js,jsx,ts,tsx}",
    "**/tests/**",
    "**/__tests__/**",
    "**/*.d.ts",
    "**/*.png",
    "server/**",
    "javascript/graphql/__generated__/**",
    "android/**",
    "__mocks__/**",
    "@images/**",
    "@images/*"
  ]
}

I'm sure this is user error, but do you have any idea what I'm doing wrong? Thank you!

Hey all,
Looking forward to using unimported, but having trouble getting it working.
It is a react project, created with Create React App.
One difference from standard CRA setup, I've set NODE_PATH='src/'
and most of my imports look like import Component from components/Component

Current config I've tried

{
  "ignoreUnresolved": [],
  "ignoreUnimported": [],
  "ignoreUnused": [],
  "moduleDirectory": ["node_modules", "src/"],
  "rootDir": "./src",
  "extensions": [".jsx", ".js"],
  "ignorePatterns": [
    "**/node_modules/**",
    "**/*.stories.{js,jsx,ts,tsx}",
    "**/*.tests.{js,jsx,ts,tsx}",
    "**/*.test.{js,jsx,ts,tsx}",
    "**/*.spec.{js,jsx,ts,tsx}",
    "**/tests/**",
    "**/__tests__/**",
    "**/*.d.ts"
  ]
}

Tried with/without rootDir and moduleDirectory, no difference.
Either way, it appears that nearly all my files are missed with unresolved imports, so they show as unimported files.

I've also tried with aliases:

"aliases": {
      "views/*": [
          "./views",
          "./views/*"
      ],
      "components/*": [
          "./components",
          "./components/*"
      ]
  },```

Hey!

I was running this on my React Native project, and I noticed that it wasn't able to follow an import such as ./User and resolve it to ./User.ios.tsx and ./User.android.tsx.

I realise this is an edge-case and might be difficult to solve since IIRC these special extensions are handled by Metro. Just wanted to surface this in case anyone else has the same issue. Luckily I have very few platform-specific files so this tool is still super valuable.

Thanks!

I am trying to run unimported on our Meteor system but get the following error:

$ npx unimported
npx: installed 200 in 9.003s
something unexpected happened
TypeError: Cannot read property 'startsWith' of undefined
    at getDependencyName (/Users/philipjohnson/.npm/_npx/73288/lib/node_modules/unimported/dist/traverse.js:30:43)
    at Object.resolveImport (/Users/philipjohnson/.npm/_npx/73288/lib/node_modules/unimported/dist/traverse.js:44:28)
    at Object.<anonymous> (/Users/philipjohnson/.npm/_npx/73288/lib/node_modules/unimported/dist/meta.js:104:45)
    at Generator.next (<anonymous>)
    at fulfilled (/Users/philipjohnson/.npm/_npx/73288/lib/node_modules/unimported/dist/meta.js:5:58)

You can reproduce the error by cloning/forking our repo at:

https://github.com/radgrad/radgrad2

and switching to the branch 'issue-344' which has package.json modified to provide the entry point for our Meteor app.

Any help will be much appreciated!

First off, I apologize if this is not the preferred channel of communication for these "issues".

I've got Unimported running through my codebases at this point, properly finding unused dependencies. However I am unable to get it to find my unused files. I've even created new files to see if they will be detected but no luck. All of our files are just .js extensions. Before adding the aliases to my config, I did have unresolved imports, since those issues are fixed I believed it would be able to find my files.

Here is what my current config looks like:

.unimportedrc.json

{
	"entry": ["apps/manager/src/index.js"],
	"extensions": [".js"],
	"ignorePatterns": ["**/node_modules/**"],
	"ignoreUnresolved": ["some-npm-dependency"],
	"ignoreUnimported": ["src/i18n/locales/en.ts", "src/i18n/locales/nl.ts"],
	"ignoreUnused": ["create-emotion", "unimported"],
	"aliases": {
		"~/*": ["apps/manager/src/*"],
		"Lib/*": ["lib/node/src/*"],
		"ROOT":  ["./../../*"]
	}
}

My Output

If there's a more appropriate area or contact for these general questions, please let me know.

Thanks in advance,
Danny

Example Repository: https://github.com/elikmiller/unimported-example

$ npx unimported
npx: installed 189 in 10.971s

       summary               unimported v1.13.0
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
       entry file          : src/index.js

       unresolved imports  : 1
       unused dependencies : 8
       unimported files    : 2


─────┬────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
     │ 1 unresolved imports
─────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
   1 │ src/components/Example
─────┴────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────


─────┬────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
     │ 8 unused dependencies
─────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
   1 │ @testing-library/jest-dom
   2 │ @testing-library/react
   3 │ @testing-library/user-event
   4 │ @types/jest
   5 │ @types/node
   6 │ @types/react
   7 │ @types/react-dom
   8 │ react-scripts
─────┴────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────


─────┬────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
     │ 2 unimported files
─────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
   1 │ src/components/Example.tsx
   2 │ src/setupTests.js
─────┴────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

Perhaps I am not configuring unimported correctly but I would expect to not see src/components/Example.tsx under unimported files as it is being imported in src/App.js