Babel-plugin-module-resolver: Babel-plugin-module-resolver with Babel 7 and React-Native

Created on 14 Aug 2018 · 8Comments · Source: tleunen/babel-plugin-module-resolver

Hello everyone!
I'm trying to implement the babel-plugin-mobule-resolver in a react-native app but I can't make it work. I'm look in everything but I could not find any solution for this problem, anyone can help me?

Here's my package.json

{
  "name": "beef",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@expo/vector-icons": "^6.3.1",
    "autobind-decorator": "^2.1.0",
    "native-base": "^2.7.2",
    "react": "16.4.1",
    "react-native": "^0.56.0",
    "react-native-vector-icons": "^5.0.0",
    "react-navigation": "^2.8.0",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-form": "^7.4.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.47",
    "@babel/plugin-proposal-decorators": "7.0.0-beta.47",
    "@babel/plugin-transform-classes": "7.0.0-beta.47",
    "@babel/plugin-transform-runtime": "7.0.0-beta.47",
    "@babel/preset-env": "^7.0.0-beta.47",
    "@babel/register": "7.0.0-beta.47",
    "babel-eslint": "^8.2.6",
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "babel-preset-react-native": "^5.0.2",
    "eslint": "^4.8.0",
    "eslint-config-airbnb": "^16.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-react": "^7.10.0",
    "react-native-dotenv": "^0.2.0",
    "react-test-renderer": "16.4.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

The .babelrc:

{
  "presets": [
    "@babel/preset-env",
    "react-native"
  ],
  "plugins": [
    ["module-resolver", {
      "root": ["src"],
      "extensions": [".ios.js", ".android.js", ".js", ".json"],
      "alias": {
        "components": "src/components",
        "routes": "src/routes",
        "theme": "src/theme",
        "styles": "src/styles",
        "actions": "src/actions",
        "reducers": "src/reducers",
        "lang": "src/lang"
      }
    }],
    ["@babel/plugin-proposal-decorators", {
      "legacy": true
    }]
  ]
}

And a file example:

import React, { Component } from 'react';
import { ImageBackground, Image, View } from 'react-native';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { reduxForm, Field, change } from 'redux-form';

import beef from 'beef/images/beef.png';
import fundoLogin from 'beef/images/fundo_login.png';

import InputText from 'components/form/InputText';
import styles from 'styles/LoginScreenStyles';

const mapStateToProps = state => ({ form: state.form });
const matchDispatchToProps = dispatch => bindActionCreators({ change }, dispatch);

@reduxForm({ form: 'FormLogin' })
@connect(mapStateToProps, matchDispatchToProps)
class LoginScreen extends Component {
  render() {
    return (
      <ImageBackground source={fundoLogin} style={styles.fundoLogin}>
        <Image source={beef} style={styles.logoLogin} resizeMode="contain" />

        <View>
          <Field
            component={InputText}
            name="email"
          />
        </View>
      </ImageBackground>
    );
  }
}

export default LoginScreen;

Here's the error:

The development server returned response error code: 500

URL: http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false

Body:
{"originModulePath":"/home/joelpiccoli/workspace/beefapp/src/routes/stacks/AuthStack.js","targetModuleName":"/components/pages/auth/LoginScreen","message":"Unable to resolve module `/components/pages/auth/LoginScreen` from `/home/joelpiccoli/workspace/beefapp/src/routes/stacks/AuthStack.js`: The module `/components/pages/auth/LoginScreen` could not be found from `/home/joelpiccoli/workspace/beefapp/src/routes/stacks/AuthStack.js`. Indeed, none of these files exist:\n\n  * `/components/pages/auth/LoginScreen(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)`\n  * `/components/pages/auth/LoginScreen/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)`","errors":[{"description":"Unable to resolve module `/components/pages/auth/LoginScreen` from `/home/joelpiccoli/workspace/beefapp/src/routes/stacks/AuthStack.js`: The module `/components/pages/auth/LoginScreen` could not be found from `/home/joelpiccoli/workspace/beefapp/src/routes/stacks/AuthStack.js`. Indeed, none of these files exist:\n\n  * `/components/pages/auth/LoginScreen(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)`\n  * `/components/pages/auth/LoginScreen/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)`"}],"name":"Error","stack":"Error: Unable to resolve module `/components/pages/auth/LoginScreen` from `/home/joelpiccoli/workspace/beefapp/src/routes/stacks/AuthStack.js`: The module `/components/pages/auth/LoginScreen` could not be found from `/home/joelpiccoli/workspace/beefapp/src/routes/stacks/AuthStack.js`. Indeed, none of these files exist:\n\n  * `/components/pages/auth/LoginScreen(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)`\n  * `/components/pages/auth/LoginScreen/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)`\n    at ModuleResolver.resolveDependency (/home/joelpiccoli/workspace/beefapp/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:167:697)\n    at ResolutionRequest.resolveDependency (/home/joelpiccoli/workspace/beefapp/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:80:16)\n    at DependencyGraph.resolveDependency (/home/joelpiccoli/workspace/beefapp/node_modules/metro/src/node-haste/DependencyGraph.js:237:485)\n    at Object.resolve (/home/joelpiccoli/workspace/beefapp/node_modules/metro/src/lib/transformHelpers.js:116:25)\n    at dependencies.map.result (/home/joelpiccoli/workspace/beefapp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:298:29)\n    at Array.map (<anonymous>)\n    at resolveDependencies (/home/joelpiccoli/workspace/beefapp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:294:16)\n    at /home/joelpiccoli/workspace/beefapp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:159:33\n    at Generator.next (<anonymous>)\n    at step (/home/joelpiccoli/workspace/beefapp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:239:307)"}
processBundleResult
    BundleDownloader.java:285
access$200
    BundleDownloader.java:37
onResponse
    BundleDownloader.java:163
execute
    RealCall.java:153
run
    NamedRunnable.java:32
runWorker
    ThreadPoolExecutor.java:1133
run
    ThreadPoolExecutor.java:607
run
    Thread.java:761

Source

joelpiccoli

👍12 😕2

Most helpful comment

Okay, so I finally managed to get it working. Turns out, you need to add the cwd option to specify the directory which the others are relative to. The documentation for that option is found here
Here's my working .babelrc file:

{
  "presets": [
    "module:metro-react-native-babel-preset"
  ],
  "plugins": [
    [
      "module-resolver",
      {
        "root": "./src",
        "alias": {
          "components": "./src/components",
          "context": "./src/context",
          "hoc": "./src/hoc",
          "navigation": "./src/navigation",
          "utils": "./src/utils"
        },
        "cwd": "packagejson"
      }
    ],
    [
      "import-graphql"
    ]
  ],
  "env": {
    "development": {
      "plugins": [
        "inline-dotenv"
      ]
    }
  }
}

kaitlynbrown on 4 Oct 2018

👍4 🚀1 ❤1

All 8 comments

@joelpiccoli Do you solve your issue ?

magrinj on 21 Aug 2018

Why is this closed? What was the resolution?

kaitlynbrown on 4 Oct 2018

hello @magrinj , @kaitlynbrown ... Actually, I wasn't able to solve the problem by myself, and for a matter of schedule I had to leave the implementation of module-resolver in the backlog for future implementation...

joelpiccoli on 4 Oct 2018

{
  "presets": [
    "module:metro-react-native-babel-preset"
  ],
  "plugins": [
    [
      "module-resolver",
      {
        "root": "./src",
        "alias": {
          "components": "./src/components",
          "context": "./src/context",
          "hoc": "./src/hoc",
          "navigation": "./src/navigation",
          "utils": "./src/utils"
        },
        "cwd": "packagejson"
      }
    ],
    [
      "import-graphql"
    ]
  ],
  "env": {
    "development": {
      "plugins": [
        "inline-dotenv"
      ]
    }
  }
}

kaitlynbrown on 4 Oct 2018

👍4 🚀1 ❤1

I was already using cwd and after upgrade react-native it stop working.

{
  "presets": [
    "module:metro-react-native-babel-preset"
  ],
  "plugins": [
    [
      "module-resolver",
      {
        "cwd": "babelrc",
        "alias": {
          "src": "./src"
        }
      }
    ]
  ]
}

rochapablo on 30 Oct 2018

👍4

@rochapablo did you solve this yet.

smooJitter on 10 Nov 2018

Any solution?

rendomnet on 20 Dec 2018

same here. Here is .babelrc

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "alias": {
          "@assets": "./src/assets",
          "@components": "./src/components",
          "@redux": "./src/redux",
          "@screens": "./src/screens",
          "@themes": "./src/themes"
        }
      }
    ]
  ]
}

and here is tsconfig.json

"baseUrl": ".",
    "paths": {
      "@assets/*": ["src/assets/*"],
      "@components/*": ["src/components/*"],
      "@redux/*": ["src/redux/*"],
      "@screens/*": ["src/screens/*"],
      "@themes/*": ["src/themes/*"]
    }

Strangely @assets reference works but the rest dont. What gives?