Search code examples
reactjsreact-nativeyarnpkgyarn-workspaces

Error: Unable to resolve module 'internal_package'

Background

I am using yarn as a package manager and I am attempting to create a mono-repo for a react-native application in conjunction with a web application using a common repo like so.

enter image description here

Issue

I am using yarn workspaces. I cd'ed into the common directory and ran yarn link and then went into the app directory and linked the package name like with this command yarn link "@wow/common". Everything seemed to work as "@wow/common" showed up in mono-repo/packages/app/node_modules. I ran yarn react-native start --reset-cachethenyarn android` and I still receive this error.

yarn run v1.22.4
$ react-native start
                                                          
               ######                ######               
             ###     ####        ####     ###             
            ##          ###    ###          ##            
            ##             ####             ##            
            ##             ####             ##            
            ##           ##    ##           ##            
            ##         ###      ###         ##            
             ##  ########################  ##             
          ######    ###            ###    ######          
      ###     ##    ##              ##    ##     ###      
   ###         ## ###      ####      ### ##         ###   
  ##           ####      ########      ####           ##  
 ##             ###     ##########     ###             ## 
  ##           ####      ########      ####           ##  
   ###         ## ###      ####      ### ##         ###   
      ###     ##    ##              ##    ##     ###      
          ######    ###            ###    ######          
             ##  ########################  ##             
            ##         ###      ###         ##            
            ##           ##    ##           ##            
            ##             ####             ##            
            ##             ####             ##            
            ##          ###    ###          ##            
             ###     ####        ####     ###             
               ######                ######               
                                                          
                 Welcome to React Native!
                Learn once, write anywhere



To reload the app press "r"
To open developer menu press "d"

[Tue Apr 07 2020 22:20:19.850]  BUNDLE  ./index.js 

error: Error: Unable to resolve module `@wow/common` from `App.tsx`: @wow/common could not be found within the project.

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules: rm -rf node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
    at ModuleResolver.resolveDependency (/home/dkendall/Projects/personal/react-projs/mono-repo/packages/app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:186:15)
    at ResolutionRequest.resolveDependency (/home/dkendall/Projects/personal/react-projs/mono-repo/packages/app/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/home/dkendall/Projects/personal/react-projs/mono-repo/packages/app/node_modules/metro/src/node-haste/DependencyGraph.js:287:16)
    at Object.resolve (/home/dkendall/Projects/personal/react-projs/mono-repo/packages/app/node_modules/metro/src/lib/transformHelpers.js:267:42)
    at dependencies.map.result (/home/dkendall/Projects/personal/react-projs/mono-repo/packages/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:434:31)
    at Array.map (<anonymous>)
    at resolveDependencies (/home/dkendall/Projects/personal/react-projs/mono-repo/packages/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:431:18)
    at /home/dkendall/Projects/personal/react-projs/mono-repo/packages/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/home/dkendall/Projects/personal/react-projs/mono-repo/packages/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)
Done in 20.64s.

Here is my package.json for @wow/common

{
  "name": "@wow/common",
  "description": "Common codebase for web and native apps",
  "version": "1.0.0",
  "main": "dist/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/react-native": "0.62.1",
    "bufferutil": "^4.0.1",
    "react": "^16.11.0",
    "react-native": "^0.62.1",
    "utf-8-validate": "^5.0.2"
  }
}

What I tried

I tried all the recommend steps in the error output

 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules: rm -rf node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*

I tried using import {App} from '../common/dist/index.js' as opposed to import {App} from '@wow/common'

If anyone can offer any solutions, I would greatly appreciate it.

Solution

  • I finally resolved this error. My solution is as follows:

    • Go into @wow/common and run yarn link
    • Go into @wow/app and run yarn link "@wow/common"
    • Update (or create) metro.config.js in @wow/app with this code:
    // /**
//  * Metro configuration for React Native
//  * https://github.com/facebook/react-native
//  *
//  * @format
//  */

const path = require('path');

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  watchFolders: [
    path.resolve(__dirname, '../../../node_modules/@wow/common'),
    path.resolve(__dirname, '../../../node_modules'),
  ],
};

    The important snippet is the watchFolders -- it tells the app where to find the common code, as well as other node modules (assuming you are not noHoisting dependencies).

    Finally, open up two terminals and enter the @wow/app directory and run:

    • yarn start --reset-cache in terminal 1
    • yarn android in terminal 2

    I came to this answer in part thanks to this SO answer: https://stackoverflow.com/a/62033406/11993942