Trouble working with webpack aliases

[mattkime]

I'm working with a project that has a number of webpack aliases defined. I'm unclear how to make importjs understand these aliases or even whether its possible. Relative imports seem to be working fine. If I manually translate a webpack alias into a relative path everything is resolved correctly. It seems like moduleNameFormatter should be able to help here but it doesn't appear to be executed - a console.log statement doesn't display anything. Perhaps its executed after a module path is resolved, not before.

Any advice on resolving webpack aliases?

[trotzig]

I suggest looking into using the aliases configuration option: https://github.com/Galooshi/import-js/blob/master/README.md#aliases

[mattkime]

I need to ui/* => src/legacy/ui/public/* - is that possible with aliases? If so, it doesn't appear to be documented.

[iahu]

need support webpack aliases +1

[mikabytes]

I could achieve this using moduleNameFormatter. Here's what I did:

cd /tmp ; mkdir test ; cd test
mkdir -p src/legacy/ui/public
echo "export const b = 'hello'" > src/legacy/ui/public/b.js
echo "console.log(b)" > src/a.js
touch .importjs-root

.importjs.js:

module.exports = {
  importStatementFormatter({ importStatement }) {
    if (importStatement.includes("legacy/ui/public/")) {
      return importStatement.replace(/'.*legacy\/ui\/public/, "'ui");
    }
    return importStatement;
  },
};

And then importjs fix src/a.js

The result is:

import { b } from 'ui/b';

console.log(b);

As this is a quite old issue I'll close it now. But if there's any need for clarification, or if I missed some problem here, then please reopen it. Thanks!