[FIXED] How to declare and use a local component as module?

Issue

I export const FontXLarge = 18; in ThemeFont.ts. When I want to use it, I used to use import {FontXLarge} from '../theme/ThemeFont';

After I add

{
    "name": "theme"
}

I can use import {FontXLarge} from 'theme/ThemeFont'; but I can't link to the folder.

So I think that if I declare module 'ThemeFont' I can link it. And the fact that I did it. When I ctrl + click (or alt + click in VSCode, depending on your setting), it can open the file ThemeFont.ts when I use import {FontXLarge} from 'ThemeFont';

declare module 'ThemeFont' {
  export const FontXLarge = 18;
}

When hover, it will show like that

But it shows error when build: Unable to resolve module ThemeFont in node_modules

Solution

We can use this library to declare local component https://github.com/tleunen/babel-plugin-module-resolver

Answered By - Zuet
Answer Checked By - - Terry (ReactFix Volunteer)