reactjs - tsconfig-vägar löses inte i React Native

Jag försöker använda TypeScripts paths-alternativ i min tsconfig.json-fil. Jag har använt paths tidigare i mina andra webb-applikationer med React. Ändå, av någon anledning vägrar Native att fungera med det.

Det här är min tsconfig.json-fil:

// Added by default by React Native
"extends": "@tsconfig/react-native/tsconfig.json",
// My options
"compilerOptions": {
    "baseUrl": "./App",
    "paths": {
        "@Assets/*": ["Assets/*"],
        "@Image/*": ["Assets/Images/*"],
    },
    "skipLibCheck": true,
}

Detta är min mappstruktur:

project
|__App
|  |__Main.tsx
|  |__Assets
|     |__Images
|        |__Test.png
|__tsconfig.json

Och inuti min Main.tsx-fil, är det så här jag försöker använda den:

const test = require("@Image/Test.png");

Men detta resulterar i felet:

Kunde inte lösa modulen @Image/Test.png från project/App/Main.tsx: @Image/Test.png kunde inte hittas inom projektet eller i dessa kataloger.

Jag har försökt alla svar i den här tråden utan något annat resultat.

Jag vet att filen finns eftersom den fungerar perfekt när jag ändrar require-sökvägen till den absoluta sökvägen.

Svar #1

Efter att ha letat omfattande efter detta problem stötte jag på denna blogg [1], där författaren använde ett regexmönster istället för en statisk sökväg och det fungerade för mig.

babel.config.js

module.exports = {
  plugins: [
    [
      "module-resolver",
      {
        root: ["."],
        alias: {
          // "@/": "./src/"  ❌ not working
          "^@/(.+)": "./src/\\1", // ✅ works
        },
      },
    ],
  ],
};

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      //We will have to add the same thing in babel.config.js
      "@/*": ["src/*"]
    }
    //other options
  }
  //other configs
}

Referens

1 - https://pratapsharma.com.np/path-alias-in-a-typescript-project