Babel-plugin-module-resolver: (React-Native) Unable to resolve module `screens` from `/front/App.js`: Module `screens` does not exist in the Haste module map

[Steffi3rd]

yarn start always failed by the same error. It was unable to resolve path screens.
I also cleaned cache yarn clean cache

I tried many config of babel.config.js, it always fails :
_(btw I don't use .babelrc, his content is in the default babel.config.js)_

My tree

I use it like this

import { HomeScreen } from 'screens';

Config 1 :

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

Config 2 :

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

Config 3 :

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

Config 4 : (without root)

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

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]

Found the solution : react-native start --reset-cache

We have to clean cache by using this : react-native start --reset-cache instead yarn clean cache

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

And the configuration which works is : Config 3

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

};

[Steffi3rd]

Related : https://github.com/tleunen/babel-plugin-module-resolver/issues/29

[dclipca]

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