Path Alias Setup with tsconfig.json not working

[creative-andrew]

Link to reproduction

#2748

To Reproduce

Using the Payload template-blank repo, configure your alias paths like this:

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "strict": false,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "baseUrl": ".",
        "outDir": "./dist",
        "rootDir": "./src",
        "jsx": "react",
        "paths": {
            "payload/generated-types": ["./src/payload-types.ts"],
            "Components/*": ["src/components/*"],
            "Fields/*": ["src/fields/*"],
            "Blocks/*": ["src/blocks/*"],
            "Public/*": ["src/public/*"]
        }
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules", "dist", "build"],
    "ts-node": {
        "transpileOnly": true,
        "swc": true
    }
}

Describe the Bug

When I start payload with yarn dev I see errors like this Module not found: Error: Can't resolve 'Blocks/CallToAction'.

Payload Version

1.9.0

[AlessioGr]

Hey @creative-andrew

The problem is that we need to tell BOTH webpack AND ts-node to handle those paths as well.

I've made a repo here which does that. It automatically adds the webpack aliases and uses the tsconfig-paths package with ts-node.

We could probably add some of that functionality into payload to make configured tsconfig paths work automatically - but I'd say that's a feature request rather than an issue

[creative-andrew]

@AlessioGr it worked fine in dev mode, but as soon as I do a build it complains:

[13:43:50] INFO (payload): Connected to MongoDB server successfully!
[13:43:50] INFO (payload): Starting Payload...
node:internal/modules/cjs/loader:1075
  const err = new Error(message);
              ^

Error: Cannot find module '@/fields/list'
Require stack:
- /home/node/app/backend/dist/blocks/TeaserPlanungsteam/index.js
- /home/node/app/backend/dist/collections/Pages.js
- /home/node/app/backend/dist/payload.config.js
- /home/node/app/backend/node_modules/payload/dist/config/load.js
- /home/node/app/backend/node_modules/payload/dist/payload.js
- /home/node/app/backend/node_modules/payload/dist/initHTTP.js
- /home/node/app/backend/node_modules/payload/dist/index.js
- /home/node/app/backend/dist/server.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
    at Module._load (node:internal/modules/cjs/loader:920:27)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (/home/node/app/backend/dist/blocks/TeaserPlanungsteam/index.js:8:30)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/node/app/backend/dist/blocks/TeaserPlanungsteam/index.js',
    '/home/node/app/backend/dist/collections/Pages.js',
    '/home/node/app/backend/dist/payload.config.js',
    '/home/node/app/backend/node_modules/payload/dist/config/load.js',
    '/home/node/app/backend/node_modules/payload/dist/payload.js',
    '/home/node/app/backend/node_modules/payload/dist/initHTTP.js',
    '/home/node/app/backend/node_modules/payload/dist/index.js',
    '/home/node/app/backend/dist/server.js'
  ]
}

Do we need a special treatment for the ./dist folder?

[thgh]

I have a potentially related issue since payload 1.14. Lots of imports are broken, even "payload/config"
^ it was swc/core related

[franknoel]

@AlessioGr Could this be supported in v2?

[remy90]

I ended up using tsc-alias as a workaround.
"build:server": "tsc --project tsconfig.json && tsc-alias -p tsconfig.json",
For anyone setting this up from scratch, add your alias into tsconfig and payload.config.

tsconfig:

"paths": {
    "@/*": ["./src/*"]
},

payload.config:

  admin: {
    webpack: config => ({
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config?.resolve?.alias,
          react: path.resolve(__dirname, '../node_modules/react'),
          'react-dom': path.resolve(__dirname, '../node_modules/react-dom'),
          'react-router-dom': path.resolve(__dirname, '../node_modules/react-router-dom'),
          '@': path.resolve(__dirname),
        },
      },
    }),

[creative-andrew]

I ended up using tsc-alias as a workaround. "build:server": "tsc --project tsconfig.json && tsc-alias -p tsconfig.json", For anyone setting this up from scratch, add your alias into tsconfig and payload.config.

tsconfig:

"paths": {
    "@/*": ["./src/*"]
},

payload.config:

  admin: {
    webpack: config => ({
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config?.resolve?.alias,
          react: path.resolve(__dirname, '../node_modules/react'),
          'react-dom': path.resolve(__dirname, '../node_modules/react-dom'),
          'react-router-dom': path.resolve(__dirname, '../node_modules/react-router-dom'),
          '@': path.resolve(__dirname),
        },
      },
    }),

I ended up doing the same and it worked:

`"build:server": "tsc --project tsconfig.json && tsc-alias -p tsconfig.json",`

[creative-andrew]

I guess this can be closed as it works well with tsc-alias and following the repo instructions mentioned by @AlessioGr in #3157 (comment)

[remy90]

I think we can probably keep this open as a feature request, it would be good to have support for this out of the box

[davelsio]

Massive thanks for opening this issue and sharing your solutions. This problem with the aliases not being resolved was driving me crazy.

Just to pitch in, I used a combination of two packages to resolve the aliases in tsconfig.json and one extra to keep the server modules out of the frontend bundle:

• ts-config-paths for ts-node.
• tsconfig-paths-webpack-plugin for webpack.
• payload-plugin-resolve-alias to keep the other two from bundling server module dependencies into the frontend.

I am at peace now. Thanks.