React Native (Typescript) 绝对路径无法解析模块

Question

I have just created a new project and I am trying to setup an absolute path by following this post: https://medium.com/geekculture/making-life-easier-with-absolute-imports-react-in-javascript-and-typescript-bbdab8a8a3a1

I have followed the steps as close as I can but can not get this to work in my simulator. (Visually there are no errors when looking at my code in IDE)

eslint-config.json

{
  "eslintConfig": {
    "extends": ["react-app", "airbnb"],
    "settings": {
      "import/resolver": {
        "node": {
          "paths": ["src"],
          "extensions": [".js", ".jsx", ".ts", ".tsx"]
        }
      }
    }
  }
}

tsconfig.json

{
  "extends": "@tsconfig/react-native/tsconfig.json",     /* Recommended React Native TSConfig base */
  "compilerOptions": {
    "skipLibCheck": true,                                 /* Skip type checking all .d.ts files. */
    "baseUrl": "src",
  },
}

In this image you can see my file structure, the error on my simulator. And how I am importing it.

I have two exported functions in my Text.tsx export function Title & export function P

Any help is appreciated... Thank you!

Answer 1

I will not suggest you to go with this flow because it's very confusing.

Suppose you had imported this react/client thing.

• Is it the npm package that contains subpath
• Is it my folder structure pathname

So I suggest you to go with the flow that most of the developers are using currently.

import Text from "@/views/Text";

I made one demo for you also, please check https://codesandbox.io/s/sleepy-dew-wn2rsu

Note

• Use eslint-plugin-import for removing import errors.

Answer 2

create new package.json file under "src" folder and add { "name": "PATH_NAME" }