Using Path Aliases

WunderGraph currently doesn't support tsconfig path aliases out of the box, but there is a simple workaround using package.json subpath imports.

Subpath imports allow you to configure private mappings that only apply to import specificiers from within the package itself. Entries in the "imports" field must always start with # to ensure they are disambiguated from external package specifiers.

To create an alias to the generated folder of WunderGraph, add the following to package.json.

// package.json
{
  "imports": {
    "#/generated/*": "./.wundergraph/generated/*"
  }
}

Then to make sure the TypeScript compiler also supports this path, it needs to be added to paths in tsconfig.json. Make sure you also configure the baseUrl.

// tsconfig.json
{
  "compilerOptions": {
    // ... truncated
    "baseUrl": ".",
    "paths": {
      "#/generated/*": [".wundergraph/generated/*"]
    }
  }
}

Et voila, now you can import the generated code from this path alias.

import { createClient } from '#/generated/client';

If you are using a monorepo setup, you need to make sure to configure these paths in every package that require them.

• Subpath imports
• TSConfig paths