Nextjs + Monorepo中的世博会“无效钩子调用”

Question

我创建了一个monorepo，包含4个包，如下所示：

.
├── lerna.json
├── package.json
├── packages
│   ├── admin-> Basic CRUD for backend with Nextjs
│   ├── mobile-> Expo app
│   ├── server-> GraphQL server
│   ├── shared -> Yup Schemas, GraphQL stuff
│   └── tsconfig.json
├── README.md
├── yarn-error.log
└── yarn.lock

8 directories, 6 files

我仍然在努力配置所有的东西，所以除了测试graphql查询之外，我还没有做什么，但是我在使用我的博览和Nextjs应用程序时遇到了麻烦。这是启动时的错误输出。

Unhandled Runtime 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.

我知道当两个版本的React在同一个回购程序中时，可能会有麻烦，但是我不知道我应该降低哪个包的版本，或者升级它们才能匹配它们。

这是我的package.json mobile包，这是一个世博会应用程序。

{
  "name": "@bt/mobile",
  "main": "__generated__/AppEntry.js",
  "version": "1.0.0",
  "keywords": [
    "react",
    "expo",
    "template",
    "typescript",
    "nativebase"
  ],
  "license": "MIT",
  "scripts": {
    "start": "expo start",
    "dev": "expo start --clear",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "postinstall": "expo-yarn-workspaces postinstall"
  },
  "dependencies": {
    "@bt/shared": "^1.0.0",
    "@apollo/client": "^3.4.15",
    "expo": "~42.0.0",
    "expo-status-bar": "~1.0.4",
    "graphql": "^15.6.0",
    "native-base": "3.2.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-safe-area-context": "3.2.0",
    "react-native-svg": "12.1.1",
    "react-native-web": "~0.13.12",
    "styled-components": "^5.3.0",
    "styled-system": "^5.1.5"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@types/react": "~16.9.35",
    "@types/react-native": "~0.63.2",
    "expo-yarn-workspaces": "^1.5.2",
    "typescript": "~4.0.0"
  },
  "bugs": {
    "url": "https://github.com/GeekyAnts/nativebase-templates/issues"
  },
  "homepage": "https://github.com/GeekyAnts/nativebase-templates#readme",
  "author": "Aditya Jamuar",
  "private": true
}

这是我的package.json包，这是一个Next应用程序。

{
  "name": "@bt/admin",
  "version": "1.0.0",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@apollo/client": "^3.4.15",
    "@bt/shared": "1.0.0",
    "@chakra-ui/icons": "^1.0.5",
    "@chakra-ui/react": "^1.4.2",
    "@chakra-ui/theme-tools": "1.1.2",
    "@emotion/react": "11.1.5",
    "@emotion/styled": "11.1.5",
    "formik": "^2.2.9",
    "framer-motion": "^4.0.3",
    "graphql": "^15.6.0",
    "next": "latest",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "yup": "^0.32.9"
  },
  "devDependencies": {
    "@types/node": "^14.6.0",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.3",
    "typescript": "4.3.2"
  }
}

我还尝试在根的package.json中使用package.json。

{
  "name": "BT",
  "version": "1.0.0",
  "license": "MIT",
  "private": true,
  "workspaces": {
    "packages": [
      "packages/**"
    ],
    "nohoist": [
      "**/react",
      "**/react/**"
    ]
  },
  "devDependencies": {
    "lerna": "^4.0.0"
  },
  "scripts": {
    "dev": "lerna run dev",
    "build": "lerna run build",
    "build:shared": "lerna run build --scope=@bt/shared",
    "bootstrap:": "lerna run yarn",
    "clean": "lerna run clean"
  }
}

这是yarn why react的输出

yarn why v1.22.10
[1/4] Why do we have the module "react"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "@bt/mobile#react@16.13.1"
info Reasons this module exists
   - "_project_#@bt#mobile" depends on it
   - in the nohoist list ["/_project_/**/react","/_project_/**/react/**"]
info Disk size without dependencies: "244KB"
info Disk size with unique dependencies: "244KB"
info Disk size with transitive dependencies: "244KB"
info Number of shared dependencies: 5
=> Found "@bt/admin#react@17.0.2"
info Reasons this module exists
   - "_project_#@bt#admin" depends on it
   - in the nohoist list ["/_project_/**/react","/_project_/**/react/**"]
info Disk size without dependencies: "356KB"
info Disk size with unique dependencies: "356KB"
info Disk size with transitive dependencies: "356KB"
info Number of shared dependencies: 3
Done in 5.54s.

下面是一个用于复制此错误的存储库：https://github.com/Je12emy/monorepo-error

Answer 1

也许为时已晚，但它可以帮助别人:)

当我开始玩monorepo时，我也会发出同样的问题。

在根package.json中，nohoist应该是[**]。

否则，您将在expo和nextjs之间发生冲突。(如果您的共享包与应用程序package.json有共同的依赖关系，则会带来更大的麻烦)。

我选择了一个不同的文件夹结构(/apps，/packages)，但是我有github中的一个工作示例；

在本演示中，您将在metro.config.json和webpack上找到一些自定义。