javascript - 使用 React 和 React Native 的 Yarn 工作区

Question

我正在创建一个 yarn workspace在 React 和 React Native 之间共享代码(完成后即将发布的博客文章!)。
对我们来说最重要的部分是在两个平台之间共享业务逻辑。在这种情况下，我们使用 react-query用于网络请求。
我们为此创建了一个“渲染 Prop ”组件

import { useAllDevices } from "../../queries/devices";

export interface DeviceListProps {
    devices: any[];
    isLoading: boolean,
    onItemClick?: () => void;
}

export interface DeviceItemListProps {
    name: string;
    onItemClick?: () => void;
}

export const DeviceListContainer = ({ render }: { render: any }) => {
    const { data, isLoading } = useAllDevices();
    return (
        <>
            {render({ devices: data?.devices, isLoading })}
        </>
    )
}

在哪里 useAllDevices是这样的:

export const useAllDevices = () => useQuery('useAllDevices', async () => {
    const devicesResponse = await get('/todos');
    return {
        devices: devicesResponse.data,
    };
});

在网络中，它就像一个魅力，但我收到了移动应用程序的错误。似乎问题出在 react-query 本身，因为一旦我放了这个:

const queryClient = new QueryClient();

const App = () => {
  const isDarkMode = false;

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <QueryClientProvider client={queryClient}>
      <ThemeProvider theme={THEME}>
        <SafeAreaView style={backgroundStyle}>
          <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
          <ScrollView
            contentInsetAdjustmentBehavior="automatic"
            style={backgroundStyle}>
            <Header />
            <Button styleType="primary">hey</Button>
          </ScrollView>
        </SafeAreaView>
      </ThemeProvider>
    </QueryClientProvider>
  );
};

我收到此错误

它工作正常，对于 React 网页版没有问题
我的 package.json在 App 模块上是这个

{
  "name": "@sharecode/app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest --updateSnapshot",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "dependencies": {
    "react": "17.0.2",
    "react-native": "0.67.3",
    "react-native-gesture-handler": "^2.3.0",
    "styled-components": "^5.3.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@sharecode/common": "1.0.0",
    "@testing-library/jest-native": "^4.0.4",
    "@testing-library/react-native": "^9.0.0",
    "@types/jest": "^27.4.1",
    "@types/react-native": "^0.66.15",
    "@types/react-test-renderer": "^17.0.1",
    "@types/styled-components-react-native": "^5.1.3",
    "@typescript-eslint/eslint-plugin": "^5.7.0",
    "@typescript-eslint/parser": "^5.7.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.14.0",
    "get-yarn-workspaces": "^1.0.2",
    "jest": "^26.6.3",
    "metro-config": "^0.56.0",
    "metro-react-native-babel-preset": "^0.66.2",
    "nock": "^13.2.4",
    "react-test-renderer": "17.0.2",
    "ts-jest": "^27.1.3",
    "typescript": "^4.4.4"
  },
  "workspaces": {
    "nohoist": [
      "react-native",
      "react-native/**",
      "react",
      "react/**",
      "react-query",
      "react-query/**"
    ]
  },
  "resolutions": {
    "@types/react": "^17"
  },
  "jest": {
    "preset": "react-native",
    "setupFilesAfterEnv": [
      "@testing-library/jest-native/extend-expect"
    ],
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

主包

{
  "name": "@sharecode/common",
  "version": "1.0.0",
  "main": "index.ts",
  "license": "MIT",
  "dependencies": {
    "axios": "^0.26.0",
    "react-query": "^3.34.16",
    "styled-components": "^5.3.3"
  },
  "devDependencies": {
    "@types/styled-components": "^5.1.24"
  }
}

和 web 包(完美运行)

{
  "name": "@sharecode/web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.1",
    "@types/node": "^16.11.26",
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.13",
    "react": "17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "^5.0.0",
    "typescript": "^4.6.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint-config-react-app": "^7.0.0",
    "react-app-rewired": "^2.2.1"
  }
}

错误似乎很简单，但我看不到发生了什么

 ERROR  Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

This error is located at:
    in QueryClientProvider (at App.tsx:31)
    in App (at renderApplication.js:50)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:92)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)
    in NuoDoor(RootComponent) (at renderApplication.js:60)
✨  Done in 318.43s.

另外，这里是 `yarn why react` 的结果

javiermanzano@Javiers-MBP app % yarn why react
yarn why v1.22.17
[1/4] 🤔  Why do we have the module "react"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@sharecode/app#react@17.0.2"
info Reasons this module exists
   - "_project_#@sharecode#app" depends on it
   - in the nohoist list ["/_project_/@sharecode/app/react-native","/_project_/@sharecode/app/react-native/**","/_project_/@sharecode/app/react","/_project_/@sharecode/app/react/**","/_project_/@sharecode/app/react-query","/_project_/@sharecode/app/react-query/**"]
info Disk size without dependencies: "356KB"
info Disk size with unique dependencies: "404KB"
info Disk size with transitive dependencies: "432KB"
info Number of shared dependencies: 3
=> Found "react@17.0.2"
info Reasons this module exists
   - "_project_#@sharecode#web" depends on it
   - Hoisted from "_project_#@sharecode#web#react"
info Disk size without dependencies: "356KB"
info Disk size with unique dependencies: "404KB"
info Disk size with transitive dependencies: "432KB"
info Number of shared dependencies: 3
✨  Done in 1.17s.

我希望我能解释问题!任何帮助表示赞赏:)
谢谢!

Answer 1

我不认为您的问题与 React 和渲染器的版本不匹配有关，因此我们以 2 个选项结束。
选项1:

3. You might have more than one copy of React in the same app

我将开始介绍第 3 个，因为这是最有可能的，在这种情况下，您的程序会检测到两个 react 。
在您的 yarn why react你有一个 react来自 "_project_#@sharecode#app"和 "_project_#@sharecode#web" Hoisted from "_project_#@sharecode#web#react" ，请记住此提升信息，因为它对解决您的问题很重要。
看着你的 package.json你有 react安装在两者上。看着你的 workspaces nohoist在 "@sharecode/app"你说不要吊 react包，但正如我之前所说，它是吊装!
那么问题是什么？
好吧，据我了解并说明了 at the nohoist documentation你需要把 nohoist配置在 package.json在您的 根 “monorepo”(在您的情况下为 @sharecode/common )。
它看起来像这样:

{
  "name": "@sharecode/common",
  ...,
  "devDependencies": {
     ...
  },
  "workspaces": {
     "packages": ["packages/*"],
     "nohoist": [
       ...,
       "**/react",
       "**/react/**",
       ...
    ]
  }
}

比，与您的 package.json运行 yarn why react 时按预期工作你应该得到这样的东西:

...
=> Found "@sharecode/app#react@17.0.2"
info Reasons this module exists
   - "_project_#@sharecode#app" depends on it
   - in the nohoist list ["/_project_/**/react-native","/_project_/**/react-native/**","/_project_/**/react","/_project_/**/react/**","/_project_/**/react-query","/_project_/**/react-query/**"]
...

也许是 found在 "_project_#@sharecode#web"和其他 nohoist大概。我自己没有检查过，但是有了上面所说的更正，你应该一切都运行良好。您可以查看 this和 this进一步解释它是如何工作的。但我很确定问题出在 nohoist不在“root monorepo”中。
P.S.:我试图找出使用 "packages": ["packages/*"], 的原因是什么并没有发现。但我推断这是说你正在提升所有不在 nohoist 中的东西。
选项 2:

2. You might be breaking the Rules of Hooks

好吧，如果您无法使用第一个选项解决您的问题，那么您的问题与钩子(Hook)有关。
我不知道这是不是你的问题，但你调用 bool在 const并且可能试图在某个地方改变它。你不能重构使用 useState(false) ?
还要检查你是否在你的一些 child 中调用了循环、条件或嵌套函数中的一些钩子(Hook)，如果我没有错过理解的话，可能是 QueryClientProvider。
搜索 Rules of Hooks我找到了这个:

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls. (If you’re curious, we’ll explain this in depth below.)