[BUG] Warning is printed when resolve.alias is used

[paulftw]

Describe the bug

Vite supports aliases for imports. (Webpack has a very similar feature too).

When an import path contains such alias a warning is printed: miss "@/bar" in "src/foo.js".
Warning without a valid reason is not great by itself (in a real project I'm getting 78 of those), but I suspect it also means @/bar is considered missing and isn't checked for circular dependencies.

To Reproduce

1. Add following code to the vite.config.js:

export default defineConfig({
  [...]
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src/'),
    },
  },
  [...]
}

2. Create two files:

% cat src/bar.js
export function bar() {
  return 42
}

% cat src/foo.js
import { bar } from '@/bar'

console.log(bar())

3. Run dpdm:

yarn dpdm ./src/foo.js
/usr/local/Cellar/node/21.6.1/bin/node [
  '/Users/paul/mytrickyproject/node_modules/dpdm/lib/bin/dpdm.js',
  './src/foo.js'
]
✔ [1/1] Analyze done!
• Dependencies Tree
  - 0) src/foo.js
      - 1) @/bar

• Circular Dependencies
  ✅ Congratulations, no circular dependency was found in your project.

• Warnings
  1) miss "@/bar" in "src/foo.js"

Expected behavior

Warning about missing @/bar should not be printed, because it is, in fact, not missing.

[paulftw]

When I do have a circular dependency in an aliased file I'm not warned about it:

% cat src/bar.js
import { baz } from '@/baz'
export function bar() {
  return baz() + ' ' + 42
}

% cat src/baz.js
import { bar } from '@/bar'

export function baz() {
  return 'baz'
}

With same foo.js and vite.config.js as in the original bug report, the output is:

% yarn dpdm ./src/foo.js
/usr/local/Cellar/node/21.6.1/bin/node [
  '/Users/paul/realdodgyproject/node_modules/dpdm/lib/bin/dpdm.js',
  './src/foo.js'
]
✔ [1/1] Analyze done!
• Dependencies Tree
  - 0) src/foo.js
      - 1) @/bar

• Circular Dependencies
  ✅ Congratulations, no circular dependency was found in your project.

• Warnings
  1) miss "@/bar" in "src/foo.js"

Note how @/baz is not reported missing and an actual circular dependency goes unnoticed.

If I replace all @/ imports with ./ imports the output becomes correct:

% yarn dpdm ./src/foo.js
/usr/local/Cellar/node/21.6.1/bin/node [
  '/Users/paul/areyoureadingthese/node_modules/dpdm/lib/bin/dpdm.js',
  './src/foo.js'
]
✔ [3/3] Analyze done!
• Dependencies Tree
  - 0) src/foo.js
      - 1) src/bar.js
          - 2) src/baz.js
              - 1) src/bar.js

• Circular Dependencies
  1) src/bar.js -> src/baz.js

• Warnings

[acrazing]

You can create a tsconfig.json in your project root directory to making dpdm understand your path mappings. You can see it here: https://www.typescriptlang.org/tsconfig#paths. A simple example looks like this:

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

[ddurschlag]

After enjoying some truly bizarre behavior, I've discovered the above syntax is incorrect. Correct would be (note the array!):

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

Best as I can tell, using just a string causes the string to be broken up into individual characters, with those characters treated as possible places to find things. So @/foo will be searched in s/foo, r/foo, c/foo, etc.

[acrazing]

Sorry for the bad example, it's updated now.

[paulftw]

Thanks @acrazing, tsconfig did the trick!