babel-plugin-module-resolver icon indicating copy to clipboard operation
babel-plugin-module-resolver copied to clipboard

Resolve works on Simulator but failed on real device : Unable to resolve module `screens` from `/front/App.js`: Module `screens` does not exist in the Haste module map

Open Steffi3rd opened this issue 6 years ago • 4 comments

When I build my app using Xcode it sucesss but when I open it, I have the same error I had before. https://github.com/tleunen/babel-plugin-module-resolver/issues/354

I fix it by using react-native start --reset-cache.

But this fix doesn't work on real device. It stills doesn't find screens import.

import { HomeScreen } from 'screens';

My tree

Capture d’écran 2019-03-23 à 11 05 03

Config babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./peperonnie'],
        extensions: ['.ios.js', '.android.js', '.js', '.json'],
      }
    ]
  ]
};

Error

error: bundling failed: Error: Unable to resolve module `screens` from `/front/App.js`: Module `screens` 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 (/front/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:183:15)
    at ResolutionRequest.resolveDependency (/front/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/node_modules/metro/src/node-haste/DependencyGraph.js:283:16)
    at Object.resolve (/front/node_modules/metro/src/lib/transformHelpers.js:261:42)
    at dependencies.map.result (/front/node_modules/metro/src/DeltaBundler/traverseDependencies.js:399:31)
    at Array.map (<anonymous>)
    at resolveDependencies (/front/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:18)
    at /front/node_modules/metro/src/DeltaBundler/traverseDependencies.js:269:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/front/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)

package.json

{
  "name": "peperonnie",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "postinstall": "node ./peperonnie/scripts/stfu.js"
  },
  "dependencies": {
    "react": "16.8.3",
    "react-native": "0.59.0",
  },
  "devDependencies": {
    "@babel/core": "^7.3.4",
    "@babel/runtime": "^7.3.4",
    "babel-jest": "^24.5.0",
    "babel-plugin-module-resolver": "^3.2.0",
    "jest": "^24.5.0",
    "metro-react-native-babel-preset": "^0.53.1",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|react-navigation|@react-navigation/.*))"
    ]
  }
}

Steffi3rd avatar Mar 23 '19 10:03 Steffi3rd

@DiederikvandenB said that maybe it is not possible to use this plugin with react-native run-ios

https://github.com/tleunen/babel-plugin-module-resolver/issues/29#issuecomment-357932877

Steffi3rd avatar Mar 23 '19 10:03 Steffi3rd

Same problem here :

Running App from XCode didn't work anymore. All paths which bable resolver plugin use are broken. Running App from CLI with react-native start ios --reset-cache works.

https://github.com/facebook/react-native/issues/23342

Steffi3rd avatar Mar 23 '19 11:03 Steffi3rd

Fixed by @MatthieuLemoine :

https://github.com/facebook/react-native/pull/24070/commits/423fee620ab5e6e5fa8a31a8efcb13bce68c3314

Steffi3rd avatar Mar 23 '19 11:03 Steffi3rd

Change your babel.config.js to .babelrc.js and it will work

sharifhh avatar Jul 13 '20 09:07 sharifhh