如何使用纱线工作区解析路径 webpack

Question

• node_modules
  • react
  • react-dom
  • extenal-react-library
• packages
  • A
    • node_modules
      • react
      • react-dom
    • package.json
  • B
  • C
• package.json

A

//package.json
"dependencies": {
  "react": "~16.8.6"
  "react-dom": ~16.8.6 
}

root package.json

//package.json
"dependencies": {
  "react": "^16.8.1",
  "react-dom": "^16.8.1",
  "extenal-react-library": "1.0.0"
}

extenal-react-library package.json

"peerDependencies": {
  "react": "~16.8.6"
  "react-dom": ~16.8.6 
}

in A packages component, i use extenal-react-library import { Button } from 'extenal-react-library' but, invalid hook call warning https://reactjs.org/warnings/invalid-hook-call-warning.html

because import React from 'react' in extenal-react-library/Button it use in root node_modules/react not A/node_modules/react

Specifically, this only happens on ssr.

help me plz..

Answer 1

It's a well known issue in yarn@1. In yarn@2, this won't happen, but only if you configure it right, as pointed out by the author in this long thread discussing this very bug .

A quick-fix however is to just add react and react-dom as dependencies to the root as well (or any other package), because yarn will only hoist dependencies to the root, if more than one project use it.