错误：无法解析模块“internal_package”答案

【问题标题】：Error: Unable to resolve module 'internal_package'错误：无法解析模块“internal_package”
【发布时间】：2020-04-08 02:31:51
【问题描述】：

背景

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

问题

我正在使用纱线工作区。我进入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.

这是我 @wow/common

的 package.json

{
  "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'

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

【问题讨论】：

标签： reactjs react-native yarnpkg yarn-workspaces

【解决方案1】：

我终于解决了这个错误。我的解决方案如下：

进入@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'),
  ],
};

重要的 sn-p 是watchFolders——它告诉应用程序在哪里可以找到公共代码以及其他节点模块（假设您不是 noHoisting 依赖项）。

最后，打开两个终端，进入@wow/app目录，运行：

yarn start --reset-cache 1 号航站楼
yarn android 2 号航站楼

我得到这个答案部分归功于这个 SO 答案：https://stackoverflow.com/a/62033406/11993942

【讨论】：