Cannot configure absolute import on new payload project

default discord avatar
paradox5270
2 months ago

I'm trying to configure absolute import in my newly created payload project. I wanted to map

@/*

to

src/*

. Typescript intellisense in VSCode picked up the path mapping, but when I run

yarn build:payload

, it gives me the following error:



ERROR in ./src/payload.config.ts 70:0-40
Module not found: Error: Can't resolve '@/constants' in '/path/to/project/src'
 @ ./node_modules/payload/dist/admin/Root.js 9:41-66
 @ ./node_modules/payload/dist/admin/index.js 10:31-48


Here's my tsconfig.json


# tsconfig.json
{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "strict": false,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "outDir": "./dist",
        "rootDir": "./src",
        "jsx": "react",
        "baseUrl": ".",
        "paths": {
            "payload/generated-types": ["src/payload-types.ts"],
            "@/*": ["src/*"]
        }
    },
    "include": ["src"],
    "exclude": ["node_modules", "dist", "build"],
    "ts-node": {
        "transpileOnly": true,
        "swc": true
    }
}

Here's my payload admin build config:


{
        ...
    admin: {
        user: users.slug,
        webpack: (config) => ({
            ...config,
            resolve: {
                ...config.resolve,
                alias: {
                    ...config.resolve.alias,
                    "@": ["src/*"]
                }
            }
        })
    },
        ...
}


I resolved the issue by having the following in my admin webpack config:



{
        ...
    admin: {
        user: users.slug,
        webpack: (config) => ({
            ...config,
            resolve: {
                ...config.resolve,
                alias: {
                    ...config.resolve.alias,
                    "@": __dirname // payload.config.ts is already located in src folder
                }
            }
        })
    },
        ...
}
    Open the post
    Continue the discussion in Discord
    Like what we're doing?
    Star us on GitHub!

    Star

    Connect with the Payload Community on Discord

    Discord

    online

    Can't find what you're looking for?

    Get help straight from the Payload team with an Enterprise License.