I'm trying to include paths aliases to my project in React Native. In fact when I start the app it's working so I think my babel.config.js is ok, but in VSCode stills appear an error telling Cannot find module or its corresponding type declarations so I think I'm having my tsconfig.json wrong

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['.'],
        alias: {
          '@ali/assets': './src/assets',
          '@ali/components': './src/components',
          '@ali/colors': './src/theme/colors.ts'
        }
      }
    ]
  ]
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "lib": ["es2017"],
    "allowJs": true,
    "jsx": "react-native",
    "noEmit": true,
    "isolatedModules": true,
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": false,
    "rootDir": ".",
    "paths": {
      "@ali/assets": ["./src/assets/*"],
      "@ali/components": ["./src/components/*"],
      "@ali/colors": ["./src/theme/colors"]
    }
  },
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"],
  "extends": "expo/tsconfig.base"
}

Here's my file src/screens/Login/index.tsx

import Wellcome from '@ali/components/LogIn/Wellcome'
import React from 'react'

import LoginForm from '../../components/forms/LoginForm'

export const LogIn = () => {
  return (
    <>
      <Wellcome />
      <LoginForm />
    </>
  )
}

export default LogIn

I can see my component Wellcome in my app, but in VSCode stills appear the error.

CodePudding user response：

This is due to a tsconfig.json bad configuration.

You should add baseUrl and remove the starting "." from paths routes.

Try this:

   "baseUrl": ".",
   "paths": {
      "@ali/assets/*": ["src/assets/*"],
      "@ali/components/*": ["src/components/*"],
      "@ali/colors/*": ["src/theme/colors"]
    }