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

Question

I have a fresh React Native 0.61.1 project with TypeScript. It used to display the new project welcome screen perfectly. I've added a class, tried to import it (it even autocompleted), but it says the component could not be found.

Here is my tsconfig.json (all the code is in my src folder, which is located in my project root):

{
    "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"
    }
  }

Notice the baseUrl there. It did not work before I added it either.

Here is my project structure:

My OnboardingScreen.tsx (which I renamed it from Onboarding.tsx after screenshotting, so that's not the issue) contains a simple component class with a render method, exported as default.

Here is my 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;

When I type Onbo... it even completes the import by itself. But when I run the app I get the infamous error:

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-*

Before you ask: Yes, after each try I do all of the above and even restart Vscode.

I've also tried adding the following tsconfig.json:

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

Though nothing changed either. What am I doing wrong? (I'm on TypeScript 3.6.2)

UPDATE: Apparently, paths is completely ignored but if I put a package.json file into each root folder that I want to reference with imports (e.g. components folder), it is picked up. For example I put the following package.json into components:

{
    "name": "components"
}

Then my code can reference it. Though, I still have no idea why it doesn't work with tsconfig path.

Answer 1

One path to resolve this error is:

Add a package.json file with the content: {"name": "@services"} in views folder.

The import must be import OnboardingScreen from '@views/screens/OnboardingScreen';

React-native and TypeScript use individual methods to find files with absolute paths. This way fix this error to me :)