reactjs - Absoluta sökvägar i react native version 0.72 typescript

Hej allihopa, så jag har problem med att ställa in absoluta sökvägar i React Native. Jag använde babel-plugin-module-resolver för det och satte också tsconfig.json och 'babel.config.js' som visat nedan, och VS Code ger inget fel om sökvägen men Metro-servern kastar fel som detta

BUNDLE  ./index.js

error: Error: Unable to resolve module @pages/pokemons/pokemons from D:\Work And Stydy Of IT\ReactNative\RTKTS\src\App.tsx: @pages/pokemons/pokemons could not be found within the project or in these directories:
  node_modules
> 1 | import Pokemons from '@pages/pokemons/pokemons';
    |                       ^
  2 | import React from 'react';
  3 |
  4 | function App(): JSX.Element {
    at ModuleResolver.resolveDependency (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:139:15)
    at DependencyGraph.resolveDependency (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\node-haste\DependencyGraph.js:277:43)
    at Object.resolve (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\lib\transformHelpers.js:169:21)
    at Graph._resolveDependencies (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\DeltaBundler\Graph.js:473:35)
    at Graph._processModule (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\DeltaBundler\Graph.js:261:38)
    at async Graph._addDependency (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\DeltaBundler\Graph.js:372:20)
    at async Promise.all (index 2)
    at async Graph._processModule (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\DeltaBundler\Graph.js:322:5)
    at async Graph._traverseDependenciesForSingleFile (D:\Work And Stydy Of IT\ReactNative\RTKTS\node_modules\metro\src\DeltaBundler\Graph.js:249:5)
    at async Promise.all (index 0)

// tsconfig.json

{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@app": [
        "app/index"
      ],
      "@app/*": [
        "app/*"
      ],
      "@services": [
        "services/index"
      ],
      "@services/*": [
        "services/*"
      ],
      "@pages": [
        "pages/index"
      ],
      "@pages/*": [
        "pages/*"
      ],
    }
  },
  "include": [
    "src/**/*",
  ]
}

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        alias: {
          '@app': ['app/index'],
          '@app/*': ['app/*'],
          '@services': ['services/index'],
          '@services/*': ['services/*'],
          '@pages': ['pages/index'],
          '@pages/*': ['pages/*'],
          underscore: 'lodash',
        },
      },
    ],
  ],
};

Steg som jag har försökt hittills:

  1. Radera node_modules och yarn.lock-filer och installera paketen igen.
  2. yarn start --reset-cache
  3. Ta bort den gamla APK som är installerad i en emulator.
  4. installera allt igen.

Innan jag publicerade detta försökte jag många svar som finns på Google och efter det publicerar jag

Svar #1

Jag tror att TypeScript-konfigurationsfilen och babel.config.js-filen inte behöver index-routnamn, i mitt fall var båda konfigurationerna som följande exempel:

// tsconfig.json
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@api": ["./api"], // this is for importing index file
      "@api/*": ["./api/*"], // this is for importing other files underneath of the api folder 

// babel.config.js
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'react-native-reanimated/plugin',
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: [
          '.ios.ts',
          '.ios.tsx',
          '.android.ts',
          '.android.tsx',
          '.ts',
          '.tsx',
          '.js',
          '.jsx',
          '.json',
        ],
        alias: {
          '@api': './src/api',
        },
      },
    ],
  ],
};

TIPSPUNKTER: Glöm inte att rensa din cache efter ovanstående konfiguration:

yarn start --reset-cache

Svar #2

Det accepterade svaret ledde mig i rätt riktning, men det saknar några saker.

Jag har precis startat ett React Native-projekt från CLI (react-native: 0.73.1). Detta är vad som fungerade för mig:

// tsconfig.json
{
    "extends": "@react-native/typescript-config/tsconfig.json",
    "compilerOptions": {
        "baseUrl": ".", // <- can also use anything, e.g: ./src
        "paths": {
            "@/*": ["./src/*"]
            // "@api": ["./api"] <- would work the same
        }
    }
}

Vi behöver installera module-resolver-pluginet:

npm install babel-plugin-module-resolver --save-dev

Och lägg till det i Babel-konfigurationen:

// babel.config.js
module.exports = {
    presets: ["module:@react-native/babel-preset"],
    plugins: [
        [
            "module-resolver",
            {
                root: ["."], // <- this is the same as the baseUrl
                extensions: [
                    ".ios.ts",
                    ".ios.tsx",
                    ".android.ts",
                    ".android.tsx",
                    ".ts",
                    ".tsx",
                ],
                alias: {
                    "@": "./src/", // <- this is absolute (different from tsconfig)
                },
            },
        ],
    ],
};

Efter allt detta kan du köra npm start och fortfarande se ett Error: Unable to resolve module. Om det är fallet, kör detta kommando för att återställa cachen:

npm start -- --reset-cache
or yarn start --reset-cache

Några anteckningar:

  • baseUrl i tsconfig bör vara samma som i root i babel.config
  • alias i babel.config fungerar endast med absoluta sökvägar, så: om du har i tsconfig: "@/*": ["./src/*"] behöver du omvandla det till: "@": "./src/"

Som tumregel: ta bort /* från nyckeln, ta bort * från värdet.

Relaterade artiklar