Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to enable jsconfig.json in react-native project

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 '~/components/MyButton';``

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

jsconfig.json:

{
  "compilerOptions": {
    "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-community/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 `~/components/MyButton` from `/TestApp/src/App.js`: Module `~/components/MyButton` does not exist in the Haste module map
like image 746
Fabian Ullmann Avatar asked Jul 15 '19 11:07

Fabian Ullmann


People also ask

What is jsconfig JSON?

What is jsconfig.json? # The presence of jsconfig.json file in a directory indicates that the directory is the root of a JavaScript Project. The jsconfig.json file specifies the root files and the options for the features provided by the JavaScript language service.

How do I set up a native build environment for React Native?

If you're integrating React Native into an existing project, you'll want to skip Expo CLI and go directly to setting up the native build environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native.

How do I run a react native app on Android?

You can also use a third-party CLI to init your React Native app, such as Ignite CLI. You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer.

Does VS Code support react/JSX and React Native?

VS Code supports JSX and React Native. You will get IntelliSense for React/JSX and React Native from automatically downloaded type declaration (typings) files from the npmjs type declaration file repository. Additionally, you can install the popular React Native extension from the Marketplace.


1 Answers

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.

like image 152
Georgiy T. Avatar answered Nov 04 '22 01:11

Georgiy T.