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
.