Metro Bundler Looking for JS files in react-native directory

Question

I am having a weird issue with React native over here. Maybe it is not even RN, but the Metro Bundler.

I have literally just created a brand new project using

react-native init TestProject

After this, I simply ran

react-native run-ios --simulator="iPhone 7"

Usually when I run-ios, the Metro bundler will, for example, look inside "/Users/fred/Documents/Development/TestProject" - right where my index.js file resides.

However - for some reason now, and on every new project that I create - it now looks at this path:

And it results in this error:

I have also tried to change the project root path in the metro.config.js

const path = require('path');

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  projectRoot: path.resolve(__dirname),
};

But it does not seems to work.

Does anyone know why this is happening, and perhaps how I can fix it?

Please let me know if I missed anything which I should have posted here.

EDIT 1:

I have managed to get it to run in a way that I don't like that much. Once I have run react-native run-ios , and the console comes up with the incorrect node_modules/react-native JS Metro Bundler console, I close that console, and KEEP the simulator open.

Then I run this command react-native start --reset-cache , and 'Command + R' the Simulator - which causes the correct path to execute. See these screenshots:

Then close the metro bundler console, and run react-native start --reset-cache :

Here we can see that the bundler now looks at the correct root path:

And then I just Command + R the Simulator:

Now, although I can continue working for now - I mean, WHY is this happening now? I have always just used the good old react-native run-ios and all was good. To do things this way is just plain cumbersome and unnecessary.

Any help will be greatly appreciated!

EDIT 2:

I am now here - where I change the root string where it is causing the problem at:

node_modules/@react-native-community/cli/build/cliEntry.js

Inside of the setupAndRun() function.

const root = options.projectRoot ? _path().default.resolve(options.projectRoot) : process.cwd();

Anyone perhaps know why this line is causing an issue?

Answer 1

So - after a month, I realised something - I was doing this within the Visual Studio Code Terminal . I simply switched to my main terminal not within VS Code, and BOOM , it was working as expected. Tried it within VS Code, and it failed! Found the culprit! Nothing related to react native or metro bundler! Damn you VS Code! Still love you though!

Answer 2

Quick solution: run in separate console:

npm start -- --reset-cache

2) Or fix bug in "@react-native-community/cli": "1.11.2" using patch-package :

diff --git a/node_modules/@react-native-community/cli/build/cliEntry.js b/node_modules/@react-native-community/cli/build/cliEntry.js
index 7fa03a8..171e019 100644
--- a/node_modules/@react-native-community/cli/build/cliEntry.js
+++ b/node_modules/@react-native-community/cli/build/cliEntry.js
@@ -198,7 +198,15 @@ async function setupAndRun() {


   const options = (0, _minimist().default)(process.argv.slice(2));
-  const root = options.projectRoot ? _path().default.resolve(options.projectRoot) : process.cwd();
+
+  var path = require('path')
+  var root
+  // Fix bug caused by removed projectRoot: https://github.com/react-native-community/cli/issues/484#issuecomment-508787630
+  if (process.argv[1].endsWith('node_modules/react-native/cli.js') && options['_'][0] == 'start')
+    root = path.normalize(process.cwd() + '/../..')
+  else
+    root = options.projectRoot ? _path().default.resolve(options.projectRoot) : (process.cwd() );
+
   const reactNativePath = options.reactNativePath ? _path().default.resolve(options.reactNativePath) : (() => {
     try {
       return _path().default.dirname( // $FlowIssue: Wrong `require.resolve` type definition
diff --git a/node_modules/@react-native-community/cli/build/commands/server/external/xsel b/node_modules/@react-native-community/cli/build/commands/server/external/xsel
old mode 100644
new mode 100755

Answer 3

If you are in Visual Studio Code, please install: https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native

This sets the path correctly and provides a number of Command Palette commands for using the Packager.