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

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

{
    "pilerOptions": {
      // 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 ponent 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 pletes 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 pletely ignored but if I put a package.json file into each root folder that I want to reference with imports (e.g. ponents folder), it is picked up. For example I put the following package.json into ponents:

{
    "name": "ponents"
}

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

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

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

{
    "pilerOptions": {
      // 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 ponent 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 pletes 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 pletely ignored but if I put a package.json file into each root folder that I want to reference with imports (e.g. ponents folder), it is picked up. For example I put the following package.json into ponents:

{
    "name": "ponents"
}

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

• javascript
• typescript
• react-native
• node-modules
• metro-bundler

• Did you try './views/screens/OnboardingScreen' ?? – hong developer Commented Oct 3, 2019 at 13:36
• 1 @hongdevelop just tried it and apparently it works that way. but I don't wanna use relative paths, I want to use it as views/screens/OnboardingScreen from anywhere within the app. – Can Poyrazoğlu Commented Oct 3, 2019 at 14:52
• try replacing "baseUrl": "src" with "baseUrl": ".", in your tsconfig.json file – Abhay Sharma Commented Oct 4, 2019 at 10:22
• @AbhaySharma but my base URL isn't root, it's src