babel-plugin-module-resolver: Relative paths not working with Expo.

I found that Expo is already using babel-plugin-module-resolver… So I’ve changed my .babelrc to create some aliases:

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

but I got the following error:

Unable to resolve module '@expo/vector-icons/glyphmaps/Entypo.json' 
from '/Users/eduardoleal/Code/lua/rook/node_modules/@expo/vector-icons/Entypo.js': 
Module does not exist in the module map or in these directories:   /Users/eduardoleal/Code/lua/rook/node_modules/@expo/vector-icons/node_modules/@expo/vector-icons/glyphmaps ,   /Users/eduardoleal/Code/lua/rook/node_modules/@expo/vector-icons/glyphmaps  This might be related to https://github.com/facebook/react-native/issues/4968 To resolve try the following:   
1. Clear watchman watches: 'watchman watch-del-all'.   
2. Delete the 'node_modules' folder: 'rm -rf node_modules && npm install'.   
3. Reset packager cache: 'rm -fr $TMPDIR/react-*' or 'npm start --reset-cache'.
ABI16_0_0RCTFatal -[ABI16_0_0RCTBatchedBridge stopLoadingWithError:] __34-[ABI16_0_0RCTBatchedBridge start]_block_invoke_2 _dispatch_call_block_and_release _dispatch_client_callout _dispatch_main_queue_callback_4CF __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ __CFRunLoopRun CFRunLoopRunSpecific GSEventRunModal UIApplicationMain main start 0x0

How can I adjust babel-plugin-module-resolver and Expo to work together?

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 3
Comments: 15 (7 by maintainers)

Most upvoted comments

After a while trying to get this working. I could resolve the problem with de following .babelrc:

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  },
  "plugins": [
    ["module-resolver", {
      "root": ["./app"],
      "alias": {
        "@components": "./app/components",
        "@config": "./app/config",
        "@helpers": "./app/helpers",
        "@navigators": "./app/navigators",
        "@reducers": "./app/reducers",
        "@screens": "./app/screens",
      }
    }]
  ]
}

Seemingly after removing the “module-resolver” from env -> development resolved the problem.

eduardoleal on May 4, 2017

@eduardoleal @brentvatne My .babelrc looks like the following and I’m not having any issues with vector-icons. Is this strange considering I have not included the "@expo/vector-icons/*": "react-native-vector-icons/*" aliases?

{
  "presets": ["react-native"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  },
  "plugins": [
    [
      "module-resolver",
      {
        "alias": {
          "react-native-vector-icons": "@expo/vector-icons"
        }
      }
    ],
    "transform-decorators-legacy",
    "transform-exponentiation-operator",
    "transform-export-extensions"
  ]
}

It’s essentially babel-preset-expo but I’m using babel-preset-react-native@4.0.0.

Palisand on Sep 22, 2017

If it’s possible to build @expo/vector-icons separately with this part

'@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',

being applied there, then I’d definitely recommend this. Then it would be ok to keep only

'react-native-vector-icons': '@expo/vector-icons',

Another way to go around this would be to use absolute paths

'react-native-vector-icons': require.resolve('@expo/vector-icons'),
'@expo/vector-icons/lib/create-icon-set': require.resolve('react-native-vector-icons/lib/create-icon-set'),
'@expo/vector-icons/lib/icon-button': require.resolve('react-native-vector-icons/lib/icon-button'),
'@expo/vector-icons/lib/create-icon-set-from-fontello': require.resolve('react-native-vector-icons/lib/create-icon-set-from-fontello'),
'@expo/vector-icons/lib/create-icon-set-from-icomoon': require.resolve('react-native-vector-icons/lib/create-icon-set-from-icomoon'),
'@expo/vector-icons/lib/icon-button': require.resolve('react-native-vector-icons/lib/icon-button'),
'@expo/vector-icons/glyphmaps': require.resolve('react-native-vector-icons/glyphmaps'),

The problem is when the config is constructed in such a way that when applied two or more times to the same may yield different results. Sometimes this may unexpectedly happen because of the reasons outside of the control of the tool and hence the strange errors.

I think that in the future there will be a warning for this, it seems like a common cause of unexpected problems with the plugin.

fatfisz on May 10, 2017

@eduardoleal If you want a quick fix, copy the config of babel-preset-expo into yours (while removing it from the presets) and drop the 'react-native-vector-icons': '@expo/vector-icons' alias.

fatfisz on May 6, 2017