纱线工作区中的 React Native 不解析外部包

Question

我正在使用纱线工作区为react和创建 monorepo react-native。我尝试添加redux到@app/common并且它可以很好地使用react，但它无法在本机中解析。您可以在https://github.com/Faisal-Manzer/react-and-react-native-monorepo/tree/08-redux上查看源代码。

加载捆绑包时出现以下错误。

error: Error: Unable to resolve module `redux` from `../common/reducers/index.js`: redux could not be found within the project or in these directories:
  ../../node_modules

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 (/Users/user/monorepo/packages/native/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:186:15)
    at ResolutionRequest.resolveDependency (/Users/user/monorepo/packages/native/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/Users/user/monorepo/packages/native/node_modules/metro/src/node-haste/DependencyGraph.js:287:16)
    at Object.resolve (/Users/user/monorepo/packages/native/node_modules/metro/src/lib/transformHelpers.js:267:42)
    at /Users/user/monorepo/packages/native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:434:31
    at Array.map (<anonymous>)
    at resolveDependencies (/Users/user/monorepo/packages/native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:431:18)
    at /Users/user/monorepo/packages/native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/user/monorepo/packages/native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)

packages
   |-- common
   |    |-- reducers
   |    |    |-- index.js
   |    |    |-- demo.js
   |    |-- package.json
   |-- web
   |    |-- package.json
   |-- native
   |    |-- metro.conf.js
   |    |-- App.js
   |    |-- package.json
package.json

包.json

{
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  ...
}

包/common/package.json

{
  "name": "@app/common",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "hoist-non-react-statics": "^3.3.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-native": "^0.62.2",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/runtime": "^7.6.2"
  }
}

包/native/package.json

{
  "name": "@app/native",
  "version": "0.0.1",
  "private": true,
  "workspaces": {
    "nohoist": [
      "**"
    ]
  },
  "dependencies": {
    "@app/common": "0.0.1",
    "get-yarn-workspaces": "^1.0.2",
    "hoist-non-react-statics": "^3.3.2",
    "react": "^16.13.1",
    "react-native": "0.62.2",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    ...
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/runtime": "^7.6.2",
    ...
  },
  ...
}

packages
   |-- common
   |    |-- reducers
   |    |    |-- index.js
   |    |    |-- demo.js
   |    |-- package.json
   |-- web
   |    |-- package.json
   |-- native
   |    |-- metro.conf.js
   |    |-- App.js
   |    |-- package.json
package.json

{
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  ...
}

Answer 1

实际上metro并没有研究安装node_modules所有依赖项的根目录。@app/common您需要将根添加node_modules到 Metro 的watchFolders.

// metro.conf.js

function getConfig(appDir, options = {}) {
    return {
        watchFolders: [
        ...,
        path.resolve(appDir, '../../node_modules')
        ]
    }
}

module.export = getConfig(__dirname);

metro.conf.js您可以在https://github.com/Faisal-Manzer/react-and-react-native-monorepo/blob/08-redux/packages/native/metro.config.js#L19查看完整内容