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.

Using Aliases in backend?

default discord avatar
generator1012 years ago
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
    2 years 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
    generator1012 years 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
    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
    twansparantlast year

    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 dedicated engineering support directly from the Payload team..