unable to resolve path outside root directory

[abanik0831]

Do you want to request a feature or report a bug?

Report a bug

What is the current behavior?

unable to resolve path above root directory

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.

create a react native project (all folders inside native directory). Create a new src directory sibling to native. Create any JS file within the src folder`

Now, inside App.js file inside your native folder try accessing the JS file from src dir --

import file from '../src/file.js'

error seen:

error: bundling failed: Error: Unable to resolve module `../src/help/me` from `/Users/abanik/project/react-native-starter/native/App.js`: The module `../src/help/me` could not be found from `/Users/abanik/project/react-native-starter/native/App.js`. Indeed, none of these files exist:
  * `/Users/abanik/project/react-native-starter/src/help/me(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
  * `/Users/abanik/project/react-native-starter/src/help/me/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
    at ModuleResolver.resolveDependency (/Users/abanik/project/react-native-starter/native/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)
    at ResolutionRequest.resolveDependency (/Users/abanik/project/react-native-starter/native/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/Users/abanik/project/react-native-starter/native/node_modules/metro/src/node-haste/DependencyGraph.js:283:16)
    at Object.resolve (/Users/abanik/project/react-native-starter/native/node_modules/metro/src/lib/transformHelpers.js:261:42)
    at dependencies.map.result (/Users/abanik/project/react-native-starter/native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:399:31)
    at Array.map (<anonymous>)
    at resolveDependencies (/Users/abanik/project/react-native-starter/native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:18)
    at /Users/abanik/project/react-native-starter/native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:269:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/abanik/project/react-native-starter/native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)

What is the expected behavior?

able to resolve path.

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system.

"metro-react-native-babel-preset": "^0.53.0",

React Native Environment Info:
    System:
      OS: macOS 10.14.3
      CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
      Memory: 191.12 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.11.4 - ~/.nvm/versions/node/v8.11.4/bin/node
      Yarn: 1.10.1 - /usr/local/bin/yarn
      npm: 5.6.0 - ~/.nvm/versions/node/v8.11.4/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    IDEs:
      Android Studio: 3.3 AI-182.5107.16.33.5314842
      Xcode: 10.2/10E125 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.1 => 0.59.1 
    npmGlobalPackages:
      react-native-cli: 2.0.1

git link: https://github.com/abanik0831/nativebug

[moonrailgun]

Same issue for me . I cant show image which without projectRoot although i can require it and get a id

Hope to fix it, its not a issue for old one.

[rob-johansen]

I have the same issue with React Native 0.60. What's really strange is I updated my metro.config.js like this to watch my sibling folder...

const path = require('path')

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    extraNodeModules: {
      "react": path.resolve(__dirname, "node_modules/react"),
      "react-native": path.resolve(__dirname, "node_modules/react-native")
    }
  },
  projectRoot: path.resolve(__dirname),
  watchFolders: [
    path.resolve(__dirname, "../src")
  ]
}

...and now when I run react-native start from the root of my project, it says it's looking in my folder for JS files:

Looking for JS files in
   /Users/rob/learn/react-native/AwesomeProject
   /Users/rob/learn/react-native/src

But when I try to import my module in App.js like so...

import React, { Component } from 'react';
import { Text, View } from 'react-native';

import Pizza from 'pizza' // This is a pizza.js file sitting in ../src

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Hello, world!!</Text>
      </View>
    )
  }
}

...the bundler spits this out:

error: bundling failed: Error: Unable to resolve module `pizza` from `/Users/rob/learn/react-native/AwesomeProject/App.js`: Module `pizza` 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 (/Users/rob/learn/react-native/AwesomeProject/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:183:15)
    at ResolutionRequest.resolveDependency (/Users/rob/learn/react-native/AwesomeProject/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/Users/rob/learn/react-native/AwesomeProject/node_modules/metro/src/node-haste/DependencyGraph.js:283:16)
    at Object.resolve (/Users/rob/learn/react-native/AwesomeProject/node_modules/metro/src/lib/transformHelpers.js:264:42)
    at /Users/rob/learn/react-native/AwesomeProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:399:31
    at Array.map (<anonymous>)
    at resolveDependencies (/Users/rob/learn/react-native/AwesomeProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:18)
    at /Users/rob/learn/react-native/AwesomeProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:269:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/rob/learn/react-native/AwesomeProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)
 BUNDLE  [android, dev] ./index.js ▓▓▓▓▓▓▓▓▓░░░░░░░ 56.9% (322/427), failed.

I've tried all the things mentioned in that output, but none of them worked.

[rochapablo]

I'm also having problem to run a example module that I'm building from scratch.

Loading dependency graph, done.
error: bundling failed: Error: Unable to resolve module `react-native-my-module` from `/example/App.js`: Module `react-native-my-module` 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 (/example/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:183:15)
    at ResolutionRequest.resolveDependency (/example/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/example/node_modules/metro/src/node-haste/DependencyGraph.js:283:16)
    at Object.resolve (/example/node_modules/metro/src/lib/transformHelpers.js:264:42)
    at dependencies.map.result (/example/node_modules/metro/src/DeltaBundler/traverseDependencies.js:399:31)
    at Array.map (<anonymous>)
    at resolveDependencies (/example/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:18)
    at /example/node_modules/metro/src/DeltaBundler/traverseDependencies.js:269:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/example/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)
 BUNDLE  [ios, dev] ./index.js ▓▓░░░░░░░░░░░░░░ 15.4% (117/298), failed.

my app package.json

"react": "16.8.6",
"react-native": "0.60.5",
"react-native-my-module": "file:../"

my module package.json

{
  "name": "react-native-my-module",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "keywords": [
    "react-native"
  ],
  "author": "",
  "license": "",
  "peerDependencies": {
    "react-native": "^0.41.2",
    "react-native-windows": "0.41.0-rc.1"
  }
}

Sometimes in other projects that I'm working on, I get this error and than I do this and it work. But now I did it for many times but it always the same error.

[jamesruan]

Same problem for me to use a local reference module which require react to be peerDependencies.

[ariccio]

Honestly, this is a very surprising problem for first time react-native devs! Especially if you're spinning up a react-native app and trying to share code with a react web app. I'm spoiled by being able to include C++ headers from any path, I guess.

[developerdanx]

Any update of this issue ?

[migueldaipre]

Hey guys, any news about this?