javascript - React Native Typescript babel-plugin-module-resolver 错误 : Cannot find module or its corresponding type declerations

Question

我可以毫无问题地使用带有 Javascript 的模块解析器。实际上我可以在运行时将它与 Typescript 一起使用而不会出现问题，但在开发部分我找不到 Cannot find module 或其相应的类型声明问题的解决方案。我正在寻找答案我做错了哪一部分？

这里是文件:

.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";

错误

感谢您的帮助:)

Answer 1

在您的配置中映射 paths 的方式看起来不正确。正确的应该是:

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