Блог

Я могу использовать модульный распознаватель с Javascript без каких-либо проблем. На самом деле я могу использовать его с Typescript без проблем во время выполнения, но в части разработки я не смог найти решение Cannot find module or its corresponding type declerations проблемы. Я ищу ответ, в какой части я делаю это неправильно?

Вот файлы:

.babelrc

 {
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "alias": [
          { "@shared-components": "./shared/components" },
          { "@shared-constants": "./shared/constants" },
          { "@shared-theme": "./shared/theme" },
          { "@font-size": "./shared/theme/font-size" },
          { "@api": "./services/api/index" },
          { "@fonts": "./shared/theme/fonts/index" },
          { "@colors": "./shared/theme/colors" },
          { "@theme": "./shared/theme/index" },
          { "@services": "./services" },
          { "@screens": "./screens" },
          { "@utils": "./utils/" },
          { "@assets": "./assets/" }
        ],
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    ]
  ]
}
 

tsconfig.json

 {
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "lib": ["esnext"],
    "allowJs": true,
    "jsx": "react-native",
    "noEmit": true,
    "isolatedModules": true,
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    // ? Custom ones
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "forceConsistentCasingInFileNames": true,
    // ? Babel Plugin Module Resolver
    "baseUrl": "./src",
    "paths": {
      "@shared-components": ["./shared/components"],
      "@shared-constants": ["./shared/constants"],
      "@shared-theme": ["./shared/theme"],
      "@font-size": ["./shared/theme/font-size"],
      "@api": ["./services/api/index"],
      "@fonts": ["./shared/theme/fonts/index"],
      "@colors": ["./shared/theme/colors"],
      "@theme": ["./shared/theme/index"],
      "@services": ["./services"],
      "@screens": ["./screens"],
      "@utils": ["./utils/"],
      "@assets": ["./assets/"]
    }
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}
 

Использование в файле .tsx

 import HomeScreen from "@screens/home/HomeScreen";
import SearchScreen from "@screens/search/SearchScreen";
import DetailScreen from "@screens/detail/DetailScreen";
 

Ошибка

Спасибо за помощь 🙂

Способ сопоставления paths в вашей конфигурации выглядит неправильно. Предполагается, что правильный:

 paths": {
  "@screens/*": ["./screens/*"], // You need to specify prefix `/*` as well
  // others ...
}