Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Cannot configure absolute import on new payload project

default discord avatar
paradox5270last year
1

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
                }
            }
        })
    },
        ...
}
  • default discord avatar
    ceibuulast year

    @WilsonLe Hey just wondering if there was anything else you configured in your payload.conf file, trying to get this running myself and constantly seeing

    Error: Cannot find module '@/my/module

    when running payload. Even though the imports are happy as in VSCode.



    Appreciate any help!

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.