Import aliases stopped working from @marko/[email protected] onwards

[vwong]

Version: 4.1.5 - 4.1.10

I'm trying to use import aliases https://vitejs.dev/config/shared-options#resolve-alias.

This was working fine in @marko/[email protected] and earlier, but is broken in every version from 4.1.5 onwards.

A minimal reproduction repo is available https://github.com/vwong/marko-vite-bug

[DylanPiercey]

@vwong FYI the issue isn't that import aliases are not working, it's specifically that ~ doesn't work as an alias anymore since we add a default one here https://github.com/marko-js/vite/blob/main/src/index.ts#L364.

The reason this was added was to (somewhat hackily) improve support with webpack and lasso based apps which for less/css files resolve ~ using the bundlers resolution. Vite doesn't handle ~ in the same way as the others and so we made @marko/vite normalize this for you.

If you change your alias from eg ~ to @ it should work fine.

However I think we could update this alias to be less aggressive, eg /^~(?!\/)/ which would allow your specific remap to slide through.

[DylanPiercey]

I'll also add that it may make more sense for you to use package json imports for this since it's essentially intended to replace a lot of this aliasing stuff.

Eg

"imports": {
  "#app/*": "./src/*.ts"
}

and then

import "~/thing";
// becomes
import "#app/thing";

[vwong]

Thanks for the tip. I've can now use package.json imports with @marko/[email protected].

[vwong]

Additional tip: Make sure to update tsconfig.json as well.

[DylanPiercey]

@vwong do you have this configured? https://www.typescriptlang.org/docs/handbook/modules/reference.html#packagejson-imports-and-self-name-imports

[vwong]

This issue is now resolved with package.json imports.