Using Aliases in backend?

default discord avatar
generator101
9 months ago
13

Looking at the demo,

https://github.com/payloadcms/public-demo

I see a lot of imports like this



import MediaContent from '../../blocks/MediaContent';
import populateFullTitle from './hooks/populateFullTitle';
import MediaSlider from '../../blocks/MediaSlider';


I tried to use aliases by modifying the tsconfig file

https://github.com/payloadcms/public-demo/blob/master/tsconfig.json

but getting error, has anyone been able to use aliases path?



Idealy importing like this


import MediaContent from '@/blocks/MediaContent';


I keep getting

code: 'MODULE_NOT_FOUND',


I see this structure was used on the website,

https://github.com/payloadcms/website/blob/d0d3b0a952cc2ce761875440f77dcf21df6f91fe/tsconfig.json

but not sure why the same thing doesnt working for the cms



@jmikrut any ideas about this?

  • discord user avatar
    jmikrut
    Payload Team
    9 months ago

    Yes, I am about to step out for a bit but this has been covered a few times before in GitHub discussions. You have to alias in a few places (TS, Webpack, and Node itself) for the CMS



    https://github.com/payloadcms/payload/discussions/505


    here's one



    but this one i don't think was ever solved fully. but it will give you some background



    i know people do it

  • default discord avatar
    generator101
    9 months ago

    oh I see



    yeah this is exactly my issue right now, VSCode recognizes the path but running dev server gives error that module not found



    I gave up on this after spending 3 hours, I could not get it to work, I think it would be great if this can be done easily like nextjs so just modifying the tsconfig file could work

  • default discord avatar
    reepicheep05
    4 months ago

    I was able to get this working with

    module-alias

    package and have the typescript intellisense working. I'm going to attach a few screenshots for reference if anyone else comes across this. If anyone has suggestions on doing this natively with node instead of using that package I would love to hear it.



    package.json.png
    payload.config.ts.png
    tsconfig.json.png
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.