CODEWITHSUNDEEP
javascriptreactjstypescriptreact-nativeimport
jrs
jrs

Reputation: 175

React Native (Typescript) Absolute path unable to resolve module

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)

Terminal error

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.

enter image description here

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

Any help is appreciated... Thank you!

Upvotes: 1

Views: 3035

Answers (3)

Mykhailo Lobaievskyi
Mykhailo Lobaievskyi

Reputation: 31

In my case (react-native: 0.73.1) I was able to resolve it by enabling global package option in

//metro.config.js

const config = {
  resolver: {
    enableGlobalPackages: true,
    // ...
  },
  // ...
}

Upvotes: 3

Lirim Krosa
Lirim Krosa

Reputation: 46

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

Upvotes: 0

Nisharg Shah
Nisharg Shah

Reputation: 19692

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.

Upvotes: 1

Related Questions