I´m setting up a new react-native project and want to configure the app to support importing modules using absolute paths by adding a jsconfig.json file to the root of my project. But the app isn´t able to resolve the modules. Do I need to do some additional setups?

I´ve created a new React-Native Project withe react-native-cli 2.0.1 with the following structure and try to import MyButton in App.js like so: `import MyButton from '~/ponents/MyButton';``

|-- android
|-- ios
|-- node_modules
|-- src
    |-- ponents
        |-- MyButton.js
    |-- App.js
|-- .eslintrc.js
|-- .flowconfig
|-- .watchmanconfig
|-- app.json
|-- babel.config.json
|-- index.js
|-- jsconfig.json
|-- metro.config.js
|-- package.json

jsconfig.json:

{
  "pilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"]
    }
  }
}

package.json

{
  "name": "TestApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.8.6",
    "react-native": "0.60.3"
  },
  "devDependencies": {
    "@babel/core": "^7.5.4",
    "@babel/runtime": "^7.5.4",
    "@react-native-munity/eslint-config": "^0.0.5",
    "babel-jest": "^24.8.0",
    "eslint": "^6.0.1",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.55.0",
    "react-test-renderer": "16.8.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

I expect that the app is able to resolve the module, but I get the error:

`Error: Unable to resolve module `~/ponents/MyButton` from `/TestApp/src/App.js`: Module `~/ponents/MyButton` does not exist in the Haste module map

I´m setting up a new react-native project and want to configure the app to support importing modules using absolute paths by adding a jsconfig.json file to the root of my project. But the app isn´t able to resolve the modules. Do I need to do some additional setups?

I´ve created a new React-Native Project withe react-native-cli 2.0.1 with the following structure and try to import MyButton in App.js like so: `import MyButton from '~/ponents/MyButton';``

|-- android
|-- ios
|-- node_modules
|-- src
    |-- ponents
        |-- MyButton.js
    |-- App.js
|-- .eslintrc.js
|-- .flowconfig
|-- .watchmanconfig
|-- app.json
|-- babel.config.json
|-- index.js
|-- jsconfig.json
|-- metro.config.js
|-- package.json

jsconfig.json:

{
  "pilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"]
    }
  }
}

package.json

{
  "name": "TestApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.8.6",
    "react-native": "0.60.3"
  },
  "devDependencies": {
    "@babel/core": "^7.5.4",
    "@babel/runtime": "^7.5.4",
    "@react-native-munity/eslint-config": "^0.0.5",
    "babel-jest": "^24.8.0",
    "eslint": "^6.0.1",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.55.0",
    "react-test-renderer": "16.8.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

I expect that the app is able to resolve the module, but I get the error:

`Error: Unable to resolve module `~/ponents/MyButton` from `/TestApp/src/App.js`: Module `~/ponents/MyButton` does not exist in the Haste module map

• javascript
• react-native

2 Answers 2

You should use babel-plugin-module-resolver.

Example configuration of babel.config.js:

module.exports = {
  ...other config

  plugins: [
    ['module-resolver', {
      root: [
        './src',
      ],
      "alias": {
        "~": "./src",
      }
    }],
  ],
};

React Native doesn't support resolving modules from jsconfig.json by default.

Alternative way:

1. Create a file named package.json inside src folder.

2. Fill with below code

   { "name": "src" }

3. The above step enables you to use the absolute address.

ex. import MyButton from 'ponents/MyButton.js';