Configuring on babel.config.js?

[wlopz]

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

[ayinlaaji]

I'm not sure I properly understand what you are trying to do but you let module-resolve use your babel.config.js file by specifying the cwd

https://github.com/tleunen/babel-plugin-module-resolver/blob/master/DOCS.md#cwd

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": [
        "transform-react-jsx-source",
        ["module-resolver", {
          "cwd":"$(PATH_TO_YOUR_babel.config.js)",
          "root": ["./src"]
        }]
      ]
    }
  }
}

[ChiuMungZitAlexander]

@wlopz totally same problem as you

[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...

[tleunen]

@ChiuMungZitAlexander This is interesting.

Without using ~components in your source code, it means you're using the "root" configuration to resolve your paths, which makes sense since you have ./src as a 'root' directly. I'm not sure why you'd need the alias configuration for the root to work, if you don't want to import your component using the syntax specified in the alias. There might be a bug in the plugin if that's the case.

[pie6k]

Maybe it'll be interesting for someone.

React Native support root imports natively with simple 'trick'

In your src folder create package.json file with such content

{
  "name": "~app"
}

Then, anywhere in your coudebase you can import like

import { Foo } from '~app/components/Foo';

Of course you can use any other alias than ~app

[cbdeveloper]

This is not working for me:

I know my babel.config.js file is being executed.

babel.config.js

module.exports = function (api) {
  const NODE_ENV = api.env();
  const presets = [
      ["@babel/preset-env",
        {
          "targets":
          { "node": "10" }
        }
      ],
      "@babel/preset-react"
    ];
  const plugins = [
      "react-hot-loader/babel",
      "babel-plugin-styled-components",
      ["module-resolver", {
        "root": ["./src"],
        "alias": {
          "@components": "./components",
          "@constants": "./constants",
          "@helpers:": "./helpers"
        }
      }]
    ];
}

My project structure:

root
> src
    > components
    > constants
    > helpers
    > OTHER FOLDER WITH MY APP FILES
babel.config.js
package.json

This is how I import using the aliases:

import helper1 from '@helpers/helper1'; // it works fine when I'm bundling with Webpack + Babel cause I've configured a webpack module resolver

But sometimes I need to transpile files using Babel directly, and that's when I came across this plugin. But so far I haven't been able to change the aliases imports.

What am I doing wrong?

[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.