Babel-plugin-module-resolver: module-resolver Module does not exist in the Haste module map

Created on 7 Jun 2018  路  4Comments  路  Source: tleunen/babel-plugin-module-resolver

Please help me!
React-Native
IDE:WebStorm
System:Windows
NPM:6.1.0

My:
npm install --save-dev babel-plugin-module-resolver

Edit .babelrc

{
  "presets": ["react-native"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src/test"],
        "extensions": [".js", ".ios.js", ".android.js"]
      }
    ]
  ]
}

Edit App.js

import React, { Component } from 'react';
import HAHA from "root/haha";   //!!!!!!!!!!!!!
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

Next:
react-native run-android

Error:

error: bundling failed: Error: Unable to resolve module `root/haha` from `D:\RNWork\untitled3\App.js`: Module `root/haha` does not exist in the Haste module map

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 Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
    at ModuleResolver.resolveDependency (D:\RNWork\untitled3\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:161:1460)
    at ResolutionRequest.resolveDependency (D:\RNWork\untitled3\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:91:16)
    at DependencyGraph.resolveDependency (D:\RNWork\untitled3\node_modules\metro\src\node-haste\DependencyGraph.js:272:4579)
    at dependencies.map.relativePath (D:\RNWork\untitled3\node_modules\metro\src\DeltaBundler\traverseDependencies.js:376:19)
    at Array.map (<anonymous>)

Please help me!

Most helpful comment

To all who are coming here looking for a solution, I had to do the following to fix this issue on React Native:
Updated my .babelrc to the following.

{
  "presets": ["react-native"],
  "plugins": [
    ["module-resolver", {
      "root": ["./src"],
      "extensions": [".js", ".ios.js", ".android.js"],
      "alias": {
        "api": "./src/api",
        "components": "./src/components",
        ...
      }
    }]
}

Note that I had to set the root path on each individual module.
"components": "components" -> "components": "./src/components"

I suppose something broke with react native or with babel-plugin-module-resolver which caused the "root" element to be ignored. It used to work.

All 4 comments

Please help me!

I don't know how I can help you. Did you follow the instructions listed below the error? What's the context? In any case there are already issues open for React Native and this one seems to be the same problem, so I'm closing it.

We don't have a good support for React Native and you can help by contributing a fix to the problem.

To all who are coming here looking for a solution, I had to do the following to fix this issue on React Native:
Updated my .babelrc to the following.

{
  "presets": ["react-native"],
  "plugins": [
    ["module-resolver", {
      "root": ["./src"],
      "extensions": [".js", ".ios.js", ".android.js"],
      "alias": {
        "api": "./src/api",
        "components": "./src/components",
        ...
      }
    }]
}

Note that I had to set the root path on each individual module.
"components": "components" -> "components": "./src/components"

I suppose something broke with react native or with babel-plugin-module-resolver which caused the "root" element to be ignored. It used to work.

@TylerMcCraw

Worked for me, thank you very much!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tleunen picture tleunen  路  6Comments

dschinkel picture dschinkel  路  4Comments

pglewis picture pglewis  路  8Comments

kkomaz picture kkomaz  路  7Comments

kruyvanna picture kruyvanna  路  4Comments