Using Aliases in backend?

default discord avatar
generator101last year
4

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
    last year

    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
    generator101last year

    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
    reepicheep05last year

    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
  • default discord avatar
    twansparant7 months ago

    Hi @reepicheep05 I'm trying to achieve the exact same thing as you. My typescript paths are working in my editor, but I'm still getting the

    Cannot find module '@collections/Pages'

    error on start. I'm trying to setup these module-alias, but I was wundering if you also added this line somewhere like stated in the docs:

    https://github.com/ilearnio/module-alias#usage

    Then add this line at the very main file of your app, before any code
    require('module-alias/register')
Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

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