javascript - React Native TypeScript: Kan inte hitta modulen (men den finns)

Jag har ett nytt React Native 0.61.1-projekt med TypeScript. Det visade tidigare välkomstskärmen för det nya projektet perfekt. Jag har lagt till en klass, försökt importera den (den autokompletterades till och med), men det står att komponenten inte kunde hittas.

Här är min tsconfig.json (all kod finns i min src-mapp, som ligger i projektets rot):

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

Notera baseUrl där. Det fungerade inte heller innan jag lade till det.

Här är min projektstruktur:

Min OnboardingScreen.tsx (som jag bytte namn på från Onboarding.tsx efter att ha tagit skärmdumpar, så det är inte problemet) innehåller en enkel komponentklass med en render-metod, exporterad som standard.

Här är min 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;

När jag skriver Onbo... fullbordar den till och med importen själv. Men när jag kör appen får jag det ökända felet:

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

Innan du frågar: Ja, efter varje försök gör jag allt ovanstående och startar till och med om Vscode.

Jag har också försökt lägga till följande tsconfig.json:

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

Fast ingenting förändrades heller. Vad gör jag för fel? (Jag använder TypeScript 3.6.2)

UPPDATERING: Tydligen ignoreras paths helt, men om jag lägger en package.json-fil i varje rotmapp som jag vill referera till med imports (t.ex. components-mappen), plockas den upp. Till exempel lade jag följande package.json i components:

{
    "name": "components"
}

Då kan min kod referera till det. Men jag har fortfarande ingen aning om varför det inte fungerar med tsconfig path.

Svar #1

En väg att lösa detta fel är:

Lägg till en package.json-fil med innehållet: {"name": "@services"} i views-mappen.

Importen måste vara import OnboardingScreen from '@views/screens/OnboardingScreen';

React-native och TypeScript använder individuella metoder för att hitta filer med absoluta sökvägar. På det här sättet fixa detta fel åt mig :)

Svar #2

du kan installera babel-plugin-module-resolver

yarn add babel-plugin-module-resolver 
or 
npm install --save-dev babel-plugin-module-resolver

Och

inställning babel.config.js

module.exports = {
  ...
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        alias: {
          '^views/(.+)': './src/views/\\1',
        },
      },
    ],
  ],
};


tsconfig.json
{
 "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "views/*": ["views/*"]
    }
  }
}
}

Relaterade artiklar