我在NX工作区的Next.js应用程序中收到了一个不合适的“无效钩子调用”错误。
我把this CodeSandbox放在一起。start命令在自动运行时失败，因此您可能需要自己重新运行它。
否则，要重现此问题，您需要执行以下步骤：

1. yarn init
   1.创建两个目录：apps和packages
   1.将"private": true和workspaces: ["apps/*", "packages/*"]添加到package.json
2. yarn global add nx
3. nx init
4. yarn add @nx/next @nx/react -D
5. nx generate @nx/next:application --name=web-app --appDir=false --e2eTestRunner=none --unitTestRunner=none --style=scss
   1.现在我们有了应用程序，在workspace根目录下安装任何与React状态对话的包（在我的例子中是jotai）：yarn add jotai -W
   1.导入包并在React树中使用它（在我的例子中，我导入了<Provider />组件并将其 Package 在应用程序中）

1.使用nx run web-app:serve --configuration=development启动应用程序
1.浏览器现在将显示TypeError: Cannot read properties of null (reading 'useRef')的服务器错误（它可能包括一些其他挂钩名称，例如，“阅读useContext”等）
1.服务器日志将包含以下内容（打开CodeSandbox以获取完整日志）：

Warning: 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.
TypeError: Cannot read properties of null (reading 'useRef')
    at useRef (/workspace/node_modules/react/cjs/react.development.js:1630:21)
    at Provider (file:///workspace/node_modules/jotai/esm/react.mjs:13:20)
    at renderWithHooks (/workspace/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8674:16)
    ...

P.S.，这可能很重要：这些是我在第7步（nx生成下一个应用程序时）看到的日志。日志包含一些可能与问题有关的警告。

>  NX  Generating @nx/next:application

Fetching prettier...
CREATE tsconfig.base.json
CREATE .prettierrc
CREATE .prettierignore
UPDATE package.json
UPDATE nx.json
CREATE apps/web-app/index.d.ts
CREATE apps/web-app/next-env.d.ts
CREATE apps/web-app/next.config.js
CREATE apps/web-app/public/.gitkeep
CREATE apps/web-app/public/favicon.ico
CREATE apps/web-app/tsconfig.json
CREATE apps/web-app/pages/index.module.scss
CREATE apps/web-app/pages/index.tsx
CREATE apps/web-app/pages/_app.tsx
CREATE apps/web-app/pages/styles.css
CREATE apps/web-app/project.json
CREATE .eslintrc.json
CREATE .eslintignore
CREATE apps/web-app/.eslintrc.json
yarn install v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "@nx/next > @babel/plugin-proposal-decorators@7.21.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@nx/next > copy-webpack-plugin@10.2.4" has unmet peer dependency "webpack@^5.1.0".
warning "@nx/next > url-loader@4.1.1" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "@nx/next > @babel/plugin-proposal-decorators > @babel/helper-create-class-features-plugin@7.21.8" has unmet peer dependency "@babel/core@^7.0.0".
warning "@nx/next > @babel/plugin-proposal-decorators > @babel/plugin-syntax-decorators@7.21.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@nx/next > @nx/react > file-loader@6.2.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 122.16s.