React Native (Typescript) Absolute path unable to resolve module

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!

can you please send us the folder structure of your project and where is the views folder? — Nisharg Shah
– Nisharg Shah, Commented Jul 9, 2022 at 18:22
Hi, @NishargShah I have included the file structure in the last image. If this is not sufficient, let me know! — jrs
– jrs, Commented Jul 9, 2022 at 18:23

Mykhailo Lobaievskyi · Accepted Answer · 2024-01-08 13:52:05Z

2

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,
    // ...
  },
  // ...
}

answered Jan 8, 2024 at 13:52

Mykhailo Lobaievskyi

292 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marvelous Ikechi Over a year ago

This saved me a whole lot of time

Maxim Toyberman Over a year ago

didn't work for me unfortunately, this should be the alternative to yarn workspaces right ?

Nisharg Shah · Accepted Answer · 2022-07-09 18:41:07Z

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.

answered Jul 9, 2022 at 18:41

Nisharg Shah

20k12 gold badges70 silver badges78 bronze badges

2 Comments

jrs Over a year ago

Hey! I am not doubting that this is the correct approach. But I struggling to understand what I need to add from that codesandbox. I have installed eslint-plugin-import and @typescript-eslint/parser. I have added baseUrl and paths from the sandbox. I have added the import Text from "@/views/Text" - but "...text/text could not be found within the project or in these directories: node modules". Also it suggests in the docs to use .eslintrc.js and seems different to your approach. So I am just unsure, could you please clarify? Thanks, Jack

Nisharg Shah Over a year ago

If you are using eslint in your project then you need to set up that plugin because without that eslint will not identify that. please check eslint.org/docs/latest/user-guide/configuring/… for your .eslintrc.js question

Lirim Krosa · Accepted Answer · 2023-01-04 16:28:54Z

0

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

answered Jan 4, 2023 at 16:28

Lirim Krosa

712 bronze badges

Collectives™ on Stack Overflow

React Native (Typescript) Absolute path unable to resolve module

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related