How to get tsconfig path aliases to work?

[keithkraker]

This extension is exactly what I have been looking for coming from iOS dev/SwiftUI. Using storybook is really heavy handed but this seems like the perfect lightweight solution for making react components in real time. I have been struggling to set it up though. For some reason, it's not picking up my custom path aliases in tsconfig.base.json in my nx monorepo. I tried editing the reactpreview.config.js by providing the path to my tsconfig.base.json file but that doesn't work. Any ideas of how I can get this working? Or does anyone have an example config file that I can check out to see how they set it up?

[fwouts]

Hey @keithkraker, sorry to hear you've been having trouble! React Preview normally picks up aliases from tsconfig.json, but there is currently no way to tell it to use a different file such as tsconfig.base.json.

However, you can provide aliases in the alias field of reactpreview.config.js. For example:

{
  foo: "/src/foo"
} 

If you need a bit more help, feel free to copy paste your paths from tsconfig.base.json here.

Also, more extensive docs are coming on reactpreview.com in the next two weeks 🙂

[fwouts]

By the way, coming from SwiftUI, you'll be interested in a new feature that's not yet documented: you can call preview(MyComponent, { foo: props1, bar: props2 }) with import { preview} from "@reactpreview/config" to declare two preconfigured previews foo and bar. This can be done in the same file that defines MyComponent, or in a sibling file with the suffix .preview.j/tsx.

[keithkraker]

Thanks! Got it working by copying in my paths from tsconfig.base.json. I hope it will be able to pick it up in the future so I don't have to keep this config in sync. Looking forward to seeing the extensive docs and continuing to use this! It's already super helpful and I can't believe something like this hasn't really existed before. Coming from SwiftUI into React, this feels right at home. Btw, that new feature sounds amazing and I can't wait!