What is the proper way to export an alias in typescript?

Question

I have the following file structure:

// ./src/products/index.ts
export * as commonPages from "./pages";

// ./src/index.ts
export * as products from "./products";

// tsconfig.json
"paths": {
        "@scrib/qa": ["./src/index.ts"],
      }

// ./src/products/product/homePage.ts
import { products } from "@scrib/qa";
export class HomePage extends products.commonPages.BasePage {...}

When compiling I get the error:

TypeError: Cannot read properties of undefined (reading 'commonPages')

   at ..\..\..\src\products\product\homePage.ts:6

> 6 | export class HomePage extends products.commonPages.BasePage {

Its complaining about products being undefined. What am I doing wrong?

Answer 1

Setting paths and compiling with only tsc doesn't change emitted imports to use those paths. Which means that they will not work.

From the docs:

Note that this feature does not change how import paths are emitted by tsc, so paths should only be used to inform TypeScript that another tool has this mapping and will use it at runtime or when bundling.

Bundlers like vite or webpack have plugins that can read the typescript config and modify the imports for you to match. But tsc will not.