Error: Unable to resolve module 'internal_package'

Error: Unable to resolve module 'internal_package'

背景

我正在使用 yarn 作为包管理器,我正在尝试为 react-native 应用程序创建一个单一的 repo,并结合使用像这样的通用 repo 的 web 应用程序。

问题

我正在使用纱线工作区。我 cd 到 common 目录和 运行 yarn link 然后进入 app 目录并链接包名称就像这个命令 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` 我仍然收到这个错误。

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.

这是我的 package.json @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"
  }
}

我试过的

我尝试了错误输出中的所有推荐步骤

 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-*

我尝试使用 import {App} from '../common/dist/index.js' 而不是 import {App} from '@wow/common'

如果有人能提供任何解决方案,我将不胜感激。

我终于解决了这个错误。我的解决方法如下:

  • 进入@wow/common和运行yarn link
  • 进入@wow/app和运行yarn link "@wow/common"
  • 使用以下代码在 @wow/app 中更新(或创建)metro.config.js
// /**
//  * 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'),
  ],
};

重要的片段是 watchFolders -- 它告诉应用程序在哪里可以找到公共代码,以及其他节点模块(假设你是 not noHoisting依赖项)。

最后,打开两个终端,进入@wow/app目录和运行:

  • yarn start --reset-cache 在航站楼 1
  • yarn android 在航站楼 2

我得到这个答案部分归功于这个 SO 答案: