Unable to configure correctly for react-native 0.57+

[alexborton]

I have read through a lot of the issues and comments and potential solutions, all to no avail. I have had a multitude of issues, for example building the path with too many ../ and my latest is not looking in the node_modules for imports.

Using;

• babel-plugin-module-resolver version ^3.1.1
• react-native version 0.57.7

The error i get is looking in the wrong place for redux imported like so;

import { compose, applyMiddleware, createStore } from 'redux'

and the error reads;

The module ../redux could not be found from `[my-path][project]/src/shared/store

My .babelrc

{
  "presets": [
    "module:metro-react-native-babel-preset"
  ],
  "plugins": [
    [
      "module-resolver",
      {
        "cwd": "babelrc",
        "root": ["./src"],
        "extensions": [
          ".js",
          ".ios.js",
          ".android.js",
          ".native.js",
          ".web.js"
        ],
        "alias": {
          "shared": "./src/shared",
          "native": "./src/native",
          "web": "./src/web"
        }
      }
    ]
  ],
  "env": {
    "production": {
      "plugins": [
        "ignite-ignore-reactotron"
      ]
    }
  }
}

Additional note; this is a hybrid application, rendering both react-native and react for web. Add NODE_PATH=src/ to my .env allows for absolute imports in web.

[thinklinux]

Have you found a fix for that one? I'm hitting the same issue right now.

[alexborton]

@thinklinux I ended up with this;

module.exports = function(api) {
  api.cache(true)
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          alias: {
            assets: './assets',
            components: './src/components',
            modules: './src/modules',
            routing: './src/routing',
            screens: './src/screens',
            theme: './src/theme',
            config: './src/config',
            translations: './src/translations',
            utils: './src/utils',
          },
        },
      ],
    ],
  }
}

There seems to be a lot of conflicting info around alias, cwd and root... turns out i didn't need either cwd or root in my instance.

To be honest, i am not sure if this is correct - but it does work for me. I would like a little feedback from some babel-heads before closing this off

[thinklinux]

@alexborton Thanks for the fast reply! Unfortunately did not work for me :/ Thanks again! :)

[alexborton]

@thinklinux you will need to make sure you do a complete cache clear out;

For expo; expo start -c and vanilla builds try npm start -- --reset-cache

Try deleting the app from simulator and such too. Plus close packager - all the usual

Just to clarify my folder structure too;

- App.js
- babel.config.js
- ...
-- src
--- components
--- modules
--- ....

[thinklinux]

@alexborton Yeap, that was it! I have a clean script that I run every time when I change something in config or package.json. I just forgot to run it :D Thanks!

[xstable]

@alexborton Would you share your clean script?

I have this as script in package.json:

        "clean-start": "rm -rf ./node_modules && yarn install && watchman watch-del-all && rm -rf $TMPDIR/haste-map-react-native-packager-* && rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf $TMPDIR/react-*",

[thinklinux]

@xstable That's my clean script

"clean": "watchman watch-del-all && rm -rf package-lock.json && rm -rf node_modules && rm -rf $TMPDIR/metro-* && rm -rf $TMPDIR/haste-map-* && npm install && say I love react native",

[vomchik]

I have problem with jest 24, looks like jest doesn't use babel config

[JeffGuKang]

In my case, wildcard was not applied in config. For example, when I use PublicText I made myself, I will import my component as below.

import PublicText from '@components/basics/PublicText'

And this set work well as I expect,

babel.config.js

  [
      'module-resolver',
      {
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          '@components': './src/components',
        },
      },
    ],

But when I use wild card, it cause module resolve error.

[
      'module-resolver',
      {
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          '@components/*': './src/components',
        },
      },
    ],

and `yarn start --reset-cache' is enough command to apply this change.

[dclipca]

I would suggest using this with React Native: https://medium.com/beqode/fixing-import-path-hell-react-native-eslint-vs-code-3d04de9762b6

[ahuounan]

In my case, wildcard was not applied in config. For example, when I use PublicText I made myself, I will import my component as below.

import PublicText from '@components/basics/PublicText'

And this set work well as I expect,

babel.config.js

  [
      'module-resolver',
      {
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          '@components': './src/components',
        },
      },
    ],

But when I use wild card, it cause module resolve error.

[
      'module-resolver',
      {
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          '@components/*': './src/components',
        },
      },
    ],

and `yarn start --reset-cache' is enough command to apply this change.

Removing the wildcards as suggested by @JeffGuKang fixed it for me. Thanks!

[vzts]

This is kind of stupid but took me hours to figure out...

  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: ['.js', 'jsx', '.ts', '.tsx', '.json'],
      },
    ],
  ],

Above config runs just fine with react-native v0.61.2. Given,

src/
  components/
    someComponent.tsx

This enables you to write import SomeComponent from 'components/someComponent' for import resolution.

The thing in my case was that, in order to import with omitting extensions, I needed to add extensions explicitly. How could I miss the documentation part in the main page? I somehow supposed this small library won't have any separate page for the doc. The morale? Read everything carefully & RTFM.