Looking at the demo,
https://github.com/payloadcms/public-demoI 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.jsonbut 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.jsonbut not sure why the same thing doesnt working for the cms
@jmikrut any ideas about this?
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
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
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.
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#usageThen add this line at the very main file of your app, before any coderequire('module-alias/register')
Star
Discord
online
Get dedicated engineering support directly from the Payload team..