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 find module" error on Typescript paths entries

default discord avatar
gis912 years ago
5

Hi,



I've created a scaffold project by running

npx create-payload-app

and just added a simple

paths

entry to my Typescript configuration named

@collections

(see attached screenshot #1).



Then, just to test things out, I replaced

import Users from './collections/Users';

with

import Users from '@collections/Users';

in

payload.config.ts

(screenshot #2) and run

yarn dev

to start the server: now I get the error "Cannot find module '@collections/Users'".



What could be the problem?

  • default discord avatar
    jessrynkar2 years ago

    Hi

    @1084190325259645051

    - you just need to add

    ./

    in front of

    src/collections/*

    then you should be good to go

  • default discord avatar
    gis912 years ago

    Ehi

    @854377910689202256

    , thank you so much for your reply!



    That's what happen when you try to write code at midnight 🤣



    Anyway, the solution you propose does not seem to fix the issue. I investigated the thing a bit further and it seems that the problem relates both to

    ts-node

    and

    webpack

    .



    According to ts-node documentation [1], ts-node does not support

    paths

    resolution out of the box, so the first thing to do is to install

    tsconfig-paths

    and add it to the ts-node config as explained in the documentation.



    After that, you have to extend your webpack alias configuration in your

    payload.config.ts

    as in the attached screenshot.



    Completed the above two steps, the dev server starts normally



    [1]

    https://typestrong.org/ts-node/docs/paths/
  • discord user avatar
    jarrod_not_jared
    2 years ago
    @1084190325259645051

    Yep! That worked for ya right?

  • default discord avatar
    gis912 years ago
    @281120856527077378

    Yesss... with those two steps it works perfectly!



    @854377910689202256

    @281120856527077378

    Thank you for your support! ❤️

  • default discord avatar
    ssyberg2 years ago

    I followed you instructions but now my relative paths in my imports don't work! Any ideas?



    Weird, actually this is working for me now, issue I ran in to was trying to also use the webpack plugin with this setup which I could not get to work (

    https://www.npmjs.com/package/tsconfig-paths-webpack-plugin

    )

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.