Configuring on babel.config.js?

I’m relatively new to Expo and React Native. Have been facing problems in using absolute paths while importing the modules. Was reading on how to implement this plugin but I am unable to use it properly since it has only instructions for .babelrc. I did almost everything found on different threads regarding this but still, I am unable to use it properly. In my expo project, I also do not have any .babelrc file instead I have babel.config.js file.

I am trying to convert this code for .babelrc:

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": [
        "transform-react-jsx-source",
        ["module-resolver", {
          "root": ["./src"]
        }]
      ]
    }
  }
}

To this for babel.config.js:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

Thanks

[ethanshar]

it’s important to reset cache after configuring new aliases just run react-native start --resetCache The new alias should take affect after that.

[ChiuMungZitAlexander]

@wlopz

It works for me in this way. Try it out.

function config(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    env: {
      development: {
        plugins: [
          ['module-resolver', {
            root: ['./src'],
            alias: {
              '~components': './src/components',
            },
          }],
        ],
      },
    },
  };
}

That ~ is necessary. But when import modules, you don’t need that ~, and still use import * from 'components'.

I haven’t studied the source code, I cannot give exact why…