React Native TypeScript：无法解析模块（但它存在）

Question

我有一个带有 TypeScript 的全新 React Native 0.61.1 项目。它曾经完美地显示新项目欢迎屏幕。我添加了一个 class，试图导入它（它甚至自动完成），但它说找不到该组件。

这是我的 tsconfig.json（所有代码都在我的 src 文件夹中，该文件夹位于我的项目根目录中）：

{
    "compilerOptions": {
      // Target latest version of ECMAScript.
      "target": "esnext",
      // Search under node_modules for non-relative imports.
      "moduleResolution": "node",
      // Process & infer types from .js files.
      "allowJs": true,
      // Don't emit; allow Babel to transform files.
      "noEmit": true,
      // Enable strictest settings like strictNullChecks & noImplicitAny.
      "strict": true,
      // Disallow features that require cross-file information for emit.
      "isolatedModules": true,
      // Import non-ES modules as default imports.
      "esModuleInterop": true,
      "baseUrl": "src",
      "jsx": "react-native"
    }
  }

注意那里的 baseUrl。在我添加它之前它确实没有工作。

这是我的项目结构：

我的 OnboardingScreen.tsx（我在 Onboarding.tsx 截屏后将其重命名，所以这不是问题所在）包含一个简单的组件 class使用渲染方法，默认导出。

这是我的 App.tsx:

import React from 'react'; import { StatusBar, } from 'react-native'; import OnboardingScreen from 'views/screens/OnboardingScreen'; const App: () => React.ReactNode = () => { return ( <> <StatusBar barStyle="dark-content" /> <OnboardingScreen/> </> ); }; export default App;

当我键入 Onbo... 时，它甚至会自行完成导入。但是当我运行应用程序时，我得到了臭名昭著的错误：

Unable to resolve module `views/screens/OnboardingScreen` from `src/App.tsx`: views/screens/OnboardingScreen could not be found within the project. If you are sure the module exists, try these steps: 1. Clear watchman watches: watchman watch-del-all 2. Delete node_modules: rm -rf node_modules and run yarn install 3. Reset Metro's cache: yarn start --reset-cache 4. Remove the cache: rm -rf /tmp/metro-*

在你问之前：是的，每次尝试后我都会执行以上所有操作，甚至重新启动 Vscode。

我也试过添加以下 tsconfig.json:

"paths": { "views/*":["src/views/*"] }

虽然也没有任何改变。我究竟做错了什么？（我使用的是 TypeScript 3.6.2）

更新： 显然，paths 被完全忽略但是如果我将 package.json 文件放入每个我想引用导入的根文件夹中（例如 components 文件夹），它被拾取。例如，我将以下 package.json 放入 components:

{ "name": "components" }

那我的代码就可以引用了。虽然，我仍然不知道为什么它不适用于 tsconfig path.

Answer 1

解决此错误的一个途径是：

在 views 文件夹中添加内容为 {"name": "@services"} 的 package.json 文件。

导入必须是import OnboardingScreen from '@views/screens/OnboardingScreen';

React-native 和 TypeScript 使用各自的方法来查找具有绝对路径的文件。通过这种方式为我修复此错误 :)

React Native TypeScript：无法解析模块（但它存在）

React Native TypeScript: Unable to resolve module (but it exists)

javascript

node-modules

typescript

react-native

metro-bundler