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
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
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/.*))"
]
}
}
@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
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
Fixed by @MatthieuLemoine :
https://github.com/facebook/react-native/pull/24070/commits/423fee620ab5e6e5fa8a31a8efcb13bce68c3314
Change your babel.config.js to .babelrc.js and it will work