How to use import with absolute paths with Expo and React Native?
For latest expo users(sdk version >= 32).
Just add plugins property in your babel.config.js (find this file in project root directory).
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
[
'module-resolver',
{
alias: {
'alias-name': './src/assets/bla/bla',
},
},
],
],
};
};
After a while trying to get this working. I could resolve the problem with de following .babelrc
:
{
"presets": ["babel-preset-react-native-stage-0/decorator-support"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
},
"plugins": [
["module-resolver", {
"alias": {
"react-native-vector-icons": "@expo/vector-icons",
"@expo/vector-icons/lib/create-icon-set": "react-native-vector-icons/lib/create-icon-set",
"@expo/vector-icons/lib/icon-button": "react-native-vector-icons/lib/icon-button",
"@expo/vector-icons/lib/create-icon-set-from-fontello": "react-native-vector-icons/lib/create-icon-set-from-fontello",
"@expo/vector-icons/lib/create-icon-set-from-icomoon": "react-native-vector-icons/lib/create-icon-set-from-icomoon",
"@expo/vector-icons/lib/icon-button": "react-native-vector-icons/lib/icon-button",
"@expo/vector-icons/glyphmaps": "react-native-vector-icons/glyphmaps",
"$components": "./app/components",
"$config": "./app/config",
"$helpers": "./app/helpers",
"$navigators": "./app/navigators",
"$reducers": "./app/reducers",
"$screens": "./app/screens",
"$images": "./assets/images",
"$fonts": "./assets/fonts",
"$icons": "./assets/icons",
"$videos": "./assets/videos",
}
}]
]
}
I copied the content of babel-preset-expo
to my .babelrc
. It's not the best solution... but it works normally.
More details about it here
Update: Expo v32.0.0 and up
Expo init is creating a babel.config.js
for you. Just add the plugins
key to your babel.config.js
file and add your alias. The env
key is not needed anymore.
module.exports = function(api) {
api.cache(true)
return {
presets: ['babel-preset-expo'],
plugins: [
[
'module-resolver',
{
alias: {
assets: './assets',
components: './src/components',
modules: './src/modules',
lib: './src/lib',
types: './src/types',
constants: './src/constants',
},
},
],
],
}
}
Update: Changes for Expo.io SDK v20.0.0
Since SDK v20.0.0 you can use the normal Babel Expo presets
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
},
"plugins": [
["module-resolver", {
"alias": {
"alias-name": "./app",
}
}]
]
}
Expo.io SDK v19.0.0 and before
Without the root
-element, separating plugins
and changing presets
to babel-preset-react-native-stage-0/decorator-support
, an alias work for me.
Using Expo.io on Version 16.0.0
Found this in the Expo Forums here: https://forums.expo.io/t/relative-paths-with-expo/654/3
Can you verify that this works on your case too?
{
"presets": ["babel-preset-react-native-stage-0/decorator-support"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
},
"plugins": [
["module-resolver", {
"alias": {
"alias-name": "./app",
}
}]
]
}