React Native TypeScript: невозможно разрешить модуль (но он существует) - PullRequest
Новая
       11

React Native TypeScript: невозможно разрешить модуль (но он существует)

1 голос
/ 03 октября 2019

У меня есть свежий проект React Native 0.61.1 с TypeScript. Раньше он идеально отображал экран приветствия нового проекта. Я добавил класс, попытался его импортировать (он даже автозаполнен), но он говорит, что компонент не найден.

Вот мой 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 там. Он не работал до того, как я его добавил.

Вот моя структура проекта:

enter image description here

МойOnboardingScreen.tsx (который я переименовал из Onboarding.tsx после снимка экрана, так что это не проблема) содержит простой класс компонента с методом рендеринга, экспортированный по умолчанию.

Вот мой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.

...