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
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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With