Using custom tsconfig aliases with payload components

[HQ92]

Is there a way to modify the payload express app to use custom path aliases in tsconfig. VS Code recognises my aliases, but when building the app it return 'cannot find module '@utils/index'. My aliases work in my nextjs frontend that consumes the api, but the components that nextjs imports do not seem to carry those aliases forward and error on build.

Just wondering if I'm missing something.

[JarrodMFlesch]

@HQ92 I believe NextJS handles this under the hood as of Next@9.4.

I think this stackoverflow post may get you up and running with your path aliases for now though --> stackoverflow post

[jmikrut]

Also, here is a link to a prior discussion where a Payload user goes in-depth regarding how he's set up aliases to function properly:

#201

[HQ92]

Thanks for the replies, I've followed some of the other conversations linked and came away with the following two steps that were recommended to get everything working:

1. webpack aliases
2. tsconfig paths

I've done as recommended as follows:

// -------------------------------------------------------------- payload.config.ts
import { buildConfig } from 'payload/config';
import { Configuration } from 'webpack';
import path from 'path';
import dotenv from 'dotenv';
import * as fromCollections from './collections';
import * as fromGlobals from './globals';

dotenv.config();

const webpackConfig = (config: Configuration) => ({
  ...config,
  resolve: {
    ...config.resolve,
    alias: {
      extensions: ['.ts', '.tsx', '.js', '.jsx'],
      ...config.resolve?.alias,
      '@utils': path.resolve(__dirname, './utils'),
    },
  },
});

export default buildConfig({
  serverURL: 'http://localhost:3000',
  collections: [
    fromCollections.Page,
    fromCollections.Study,
    fromCollections.Media,
    fromCollections.FormSubmission,
    fromCollections.Category,
  ],
  globals: [fromGlobals.MegaMenu, fromGlobals.SocialMedia, fromGlobals.Footer],
  typescript: {
    outputFile: path.resolve(__dirname, 'payload-types.ts'),
  },
  admin: {
    webpack: webpackConfig,
  },
});

// -------------------------------------------------------------- tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react",
    "baseUrl": ".",
    "paths": {
      "@root/*": ["./*"],
      "@api/*": ["./api/*"],
      "@components/*": ["./components/*"],
      "@config/*": ["./config/*"],
      "@content/*": ["./content/*"],
      "@hooks/*": ["./hooks/*"],
      "@images/*": ["./public/assets/images/*"],
      "@pages/*": ["./pages/*"],
      "@services/*": ["./services/*"],
      "@store/*": ["./store/*"],
      "@styles/*": ["./styles/*"],
      "@utils/*": ["./utils/*"]
    },
    "incremental": true,
    "outDir": "./dist",
    "rootDir": "./",
    "noEmit": false
  },
  "ts-node": {
    "transpileOnly": true
  }
}

// -------------------------------------------------------------- package.json
{
  "name": "payload",
  "description": "Boilerplate project for payload",
  "version": "1.0.0",
  "main": "dist/server.js",
  "private": true,
  "homepage": ".",
  "nodemonConfig": {
    "ignore": [
      "**/*.test.ts",
      "**/*.spec.ts",
      ".git",
      "node_modules"
    ],
    "watch": [
      "*"
    ],
    "exec": "node -r tsconfig-paths/register -r ts-node/register ./server.ts",
    "ext": "ts, js"
  },
  "scripts": {
    "dev": "cross-env PAYLOAD_CONFIG_PATH=payload.config.ts nodemon",
    "build:payload": "cross-env PAYLOAD_CONFIG_PATH=payload.config.ts payload build",
    "build:server": "tsc",
    "build": "yarn build:payload && yarn build:server",
    "serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NODE_ENV=production node dist/server.js",
    "generate:types": "cross-env PAYLOAD_CONFIG_PATH=payload.config.ts payload generate:types"
  },
  "dependencies": {
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "payload": "^0.15.1"
  },
  "devDependencies": {
    "@types/express": "^4.17.9",
    "cross-env": "^7.0.3",
    "nodemon": "^2.0.6",
    "ts-node": "^9.1.1",
    "tsconfig-paths": "^3.14.1",
    "typescript": "^4.1.3"
  },
  "browserslist": [
    ">0.3%",
    "not ie 11",
    "not dead",
    "not op_mini all"
  ],
  "engines": {
    "node": ">=12.x.x <=16.x.x",
    "npm": ">=6.0.0"
  }
}

Still comes back with the cannot find module '@utils/index' error from inside a field taken straight from one of the boilerplates on payload. Anything stand out immediately or should i try and put up an example online?

Thanks again

[jmikrut]

Hey @HQ92 — a few questions:

1. Can you post the most recent error message you're receiving?
2. Does your IDE properly locate types if you hover over import statements like @utils/index? If so, this means that your TypeScript aliases are working, and it's just something wrong with the implementation of tsconfig-paths, which, if I understand correctly, is a package that automatically takes your TS paths and ensures that Node itself can also find these paths (which is the issue you're up against.)

A description of the problem you're facing is that there are basically 3 contexts where files need to load, and you need to define where and how to load them:

1. TypeScript - this is PURELY for type compiling. It has nothing to do with Node actually executing your project.
2. Node - consider this as basically Node executing a script. Ignore anything in your TS paths, because Node doesn't know about TS.
3. Webpack - need to alias here as well because Webpack loaders will be used to parse your client code, and the loaders need to know about your aliases in order to find your files.

It'd be great to have a public repo available so that we can pull it down. We could probably have someone make a PR against your code to get everything working for you.

I'm pretty sure your problem has to do with your implementation of tsconfig-paths. Note that it's not enough to just install the package. You need to update your nodemon file to register tsconfig-paths before executing your server. That is probably the issue here.

Let me know!

[HQ92]

Hey @jmikrut,

1. 
2. I'm 100% sure my typescript aliases are working as I initially tried this in a project where payload was integrated into the same repo as a nextjs frontend, I basically grabbed your repo from your video series on youtube detailing how a simple site would work and was in the process of integrating some of my preferences into the project, i.e styled-components and so on until I hit a snag with the tsconfig aliases. In the integrated project it would run the frontend completely fine with same tsconfig and I've used it on multiple nextjs only sites as well. VS Code also has no issue and, as you said, hovering over the import works as expected -

I agree that aliasing is a little bit of a mess at the moment in the dev space, hopefully something comes along that can allow you to effectively define them in one central location at some point! But to address your points:

1. TypeScript - Yup, purely on dev side, nothing to do with actual execution.
2. Node - Yup, needs a bridge of some sort, most typically requires you to duplicate your aliases effectively into two locations, one for types and one for actual runtime.
3. Webpack - I've implemented aliases in previous projects where I ran my own webpack before I shifted to nextjs as I got tired of having to maintain all the different clever things I had going on from type checking, to image optimisations with webp and generating styles to prevent fouc and so on. This is kind of what I used a few years ago .

Sure, I've created a public version of a simple payload app on GitHub for you to pull and see if you get the same error at https://github.com/HQ92/payload-aliases. I also have a few different variations where I've created a repo with an integrated payload cms into the same folder as the frontend which would be more suitable for some projects as well as one with those separated into backend/frontend folders which would allow you to check them in as one repo, but would allow you to easily deploy them to separate hosts on top of the solely payload repo as above.

Any help would be appreciated :D

btw I am running Node v14.19.1 and NPM 6.14.16

[HQ92]

Were there any updates on this or is there no current way to do this and we should just use relative/absolute imports at the moment?